在移动端Web项目开发中,咱们每每须要用到一些小图标,好比搜索,返回,小菜单,小箭头等等。。这若是还用切图你就OUT了。。css
而这时CSS3提供的字体图标无疑是咱们最好的选择,它就像字体同样,能够设置大小,颜色等样式,美滋滋。html
而阿里巴巴矢量图标库 ,各个设计师们为咱们制做了海量的小图标,任君选择 截至目前2017.12.8日 已经拥有了约185万个图标字体
连接:http://www.iconfont.cn/ ui
好了,进入正题。设计
第一步:打开上述连接 ,进入图标库,哦对了,还得登录,而后在图标库右上方的搜索栏,搜索你的项目须要的、或者你想要的小图标。3d
好比我须要 “搜索”、“返回”、“删除”、“小菜单”这些图标。那么在搜索栏输入一个“返回”,将会出现如下界面htm
固然。这还只是一部分。5000个返回的小图标任你选择。blog
第二步:若是你须要其中一个,鼠标选中,添加入库。此时,你的购物车中就有了这个小图标。开发
而后,你能够再挑选其余的 ,跟逛淘宝同样,把须要的加入你的购物车。class
第三步:你以为够了,那么就能够结帐了,哈哈哈。打开购物车。选择下载代码。
这时,就把你刚才挑选的字体图标都下到本地了。
第四步:解压文件,获得如下目录文件:
这个是iconfont为咱们打包的一个刚才的图标文件 也就是你的快递到了。能够打开包裹(demo)看看啊哈哈。
第五步:把字体图标文件放入你的项目目录。在项目目录下面建一个fonts文件夹,把上图的最后5个文件拷贝进去。
第六步:在你的html中引入iconfont.css。而后给须要图标的地方加一个 <i class="icon iconfont icon-fanhui"></i>
改一下类名,相信你已经都懂了。。