绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

在移动端Web项目开发中，咱们每每须要用到一些小图标，好比搜索，返回，小菜单，小箭头等等。。这若是还用切图你就OUT了。。

而这时CSS3提供的字体图标无疑是咱们最好的选择，它就像字体同样，能够设置大小，颜色等样式，美滋滋。

而阿里巴巴矢量图标库 ，各个设计师们为咱们制做了海量的小图标，任君选择  截至目前2017.12.8日 已经拥有了约185万个图标

连接：http://www.iconfont.cn/  

好了，进入正题。

 

第一步：打开上述连接 ，进入图标库，哦对了，还得登录，而后在图标库右上方的搜索栏，搜索你的项目须要的、或者你想要的小图标。

好比我须要  “搜索”、“返回”、“删除”、“小菜单”这些图标。那么在搜索栏输入一个“返回”，将会出现如下界面

固然。这还只是一部分。5000个返回的小图标任你选择。

 

第二步：若是你须要其中一个，鼠标选中，添加入库。此时，你的购物车中就有了这个小图标。

而后，你能够再挑选其余的 ，跟逛淘宝同样，把须要的加入你的购物车。

 

 

第三步：你以为够了，那么就能够结帐了，哈哈哈。打开购物车。选择下载代码。

这时，就把你刚才挑选的字体图标都下到本地了。

 

 

第四步：解压文件，获得如下目录文件：

这个是iconfont为咱们打包的一个刚才的图标文件    也就是你的快递到了。能够打开包裹(demo)看看啊哈哈。

 

第五步：把字体图标文件放入你的项目目录。在项目目录下面建一个fonts文件夹，把上图的最后5个文件拷贝进去。

第六步：在你的html中引入iconfont.css。而后给须要图标的地方加一个    <i class="icon iconfont icon-fanhui"></i>     

改一下类名，相信你已经都懂了。。