Created By JishuBao on 2019-03-06 12:38:22
Recently revised in 2019-03-08 12:38:22
欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址
开篇点题:
这是一篇教您如何使用阿里iconfont矢量图标的教程，看完此文，包你拿下iconfont不必苦恼。
感觉不错的小伙伴，点赞star走一波;
感觉文章有误的小伙伴，评论区、QQ群走一波；
虚心求教，不胜感激~
文章简介：
1、什么是iconfont？
2、为什么要使用iconfont？
3、如何进入iconfont官网选图标？
4、在web端(html,vue,react)中使用在线iconfont？
5、在web端(html,vue,react)中使用本地iconfont？
顾名思义iconfont就是把图标用字体的方式呈现。
其优点在于以下几个方面:
1.可以通过css的样式改变其颜色(最霸气的理由）
2.相对于图片来说,具有更高的分辨率
3.更小的存储
缺点:浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持
进入阿里iconfont官网,注册并登陆,登陆好以后在首页点击我的项目,。
点击添加项目按钮。
这里我们点击添加项目，填写好项目相关信息以后点击新建新建测试iconfont的项目。
在这里点击搜索框即可获取海量图标。
比如我们点击搜索公司。
就会出现很多图标。鼠标悬浮在上面会出现三个图标。点击第一个。
点击第一个就会出现这种情况。
点击右上角。点击添加至项目将项目添加到刚刚新建的项目里面。
点击确定即可。
点击在线链接出现链接。
我们可以看到图标上有三个按钮！
接下来我们的示例demo都会使用选择的这三个图标(2个有色图标,一个无色图标)！
一.unicode是字体在网页端最原始的应用方式，特点是：
1.兼容性最好，支持ie6+，及所有现代浏览器。
2.支持按字体的方式去动态调整图标大小，颜色等等。
3.但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
二.font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
1.兼容性良好，支持ie8+，及所有现代浏览器。
2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
3.因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
三.symbol这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
1.支持多色图标了，不再受单色限制。
2.通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
3.兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。
使用在线iconfont的前提是先在head标签里面引入样式文件，在Iconfont里面找到在线链接：
1.unicode使用方法：
效果:全部变成无色图标
2.font-class使用方法：
效果:全部变成无色图标
3.symbol使用方法：
效果:前面2个是有色图标后面一个是无色图标
1.unicode使用方法:
效果:全部变成无色图标
2.font-class使用方法:
效果:全部变成无色图标
3.symbol使用方法：
效果:前面2个是有色图标后面一个是无色图标
1.unicode使用方法:
效果:全部变成无色图标
2.font-class使用方法:
效果:全部变成无色图标
3.symbol使用方法：
效果:前面2个是有色图标后面一个是无色图标
在线使用iconfont虽然很省事,不需要下载很多文件配置啥的,但是有一个缺点,当iconfont挂了,诸如此类发生...图片加载很慢,导致用户浏览页面不友好等等,所以我们还是尽量少用在线，接下来教大家使用下载下来的图标文件使用
既然是使用本地的iconfont，本地肯定需要相应的iconfont文件,点击下载至本地，将文件下载解压到我们的文件夹下。
如下图。
下载下来的iconfont.css文件
1.unicode使用方法：
效果:全部变成无色图标
2.font-class使用方法：
效果:全部变成无色图标
3.symbol使用方法：
效果:前面2个是有色图标后面一个是无色图标
1.unicode使用方法:
效果:全部变成无色图标
2.font-class使用方法:
效果:全部变成无色图标
3.symbol使用方法：
效果:前面2个是有色图标后面一个是无色图标
1.unicode使用方法:
效果:全部变成无色图标
2.font-class使用方法:
效果:全部变成无色图标
3.symbol使用方法：
x
效果:前面2个是有色图标后面一个是无色图标
是不是很简单呢,小伙伴们！ 如果你觉得我的文章还不错的话，可以给个star哦~，GitHub地址