精致的免费开源图标库应用案例-砝码网

精致的免费开源图标库应用案例

Font Awesome图标:

  • Font Awesome中文官网:http://www.fontawesome.com.cn
  • Font Awesome官网 https://fontawesome.dashgame.com/
  • 特色:俗称“FA图标”多用于网站,矢量格式可无限缩放

网站应用:

1.网站引入应用,只需要在网站头部文件“</head>”之前引入CDN文件

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.实例应用演示:

<i class="fa-address-card"></i>

 

获取图标:

Font Awesome图标

Remix Icon图标:

  • Remix Icon官网: https://remixicon.com

  • 特色:支持SVG格式、PNG格式下载,支持编辑颜色

网站应用:

1.网站引入应用,只需要在网站头部文件“</head>”之前引入CDN文件

 <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

2.实例应用演示:

<i class="ri-home-4-line"></i>

3.部分图标支持旋转,使用 fa-spin 类来使任意图标旋转,现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

4.更多常用特性可查看官网介绍,如:图标大小、高度、翻转

获取图标:

Remix Icon图标

iconfont-阿里巴巴矢量图标库:

  • 阿里ICO官网: https://www.iconfont.cn/
  • 特色:支持SVG格式、PNG格式、Ai源文件格式下载,支持编辑颜色,支持复制SVG代码,图标样式超多,超精美

网站应用:

1.登录网站,后选择自己心仪的图标,“添加入库”,然后去购物车,选择“添加至项目”

2.添加好以后,去自己的项目中,选择“Font class”生成链接

3.然后再网站引入css文件,链接自适应,支持https,比如:

<link href="https://at.alicdn.com/t/font_2370831_dpu4xo4yvkq.css" rel="stylesheet">

4.然后再如要的图标位置插入图标:

<i class="iconfont icon-bianzu16"></i>

安卓应用:

1.阿里ico还可用于安卓,只需要下载SVG文件,然后通过特定工具,转化为安卓使用的XML格式

获取图标:

精致的免费开源图标库应用案例插图

IconPark资源图标库:

  • 字节跳动ICO官网: https://iconpark.oceanengine.com
  • 特色:支持SVG格式格式下载,支持编辑颜色,圆角等,可编辑性较强

获取图标:

IconPark资源图标库

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享