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

在移动端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>     

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

相关文章
相关标签/搜索