关于阿里巴巴iconfont的使用方法

iconfont网址：http://www.iconfont.cn/

提及iconfont，作前端开发的应该知道它的好处，图标库之丰富，只有你想不到的，没有你找不到的，并且轻量高清。用户在iconfont.cn能够下载，多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

下面给你们介绍一下具体使用步骤：

1.使用新浪微博或者github帐号登陆一下。

2.找到图标管理->个人项目->而后新建项目:

3.查找你须要的icon,这里有两种方式：一是直接输入关键词搜索，二是经过页面上方的图标库进行查找。

4.找到心仪的图标后加入购物车，每次可添加多个。鼠标悬停在图标上就会有三个选项：添加入库、收藏、下载。咱们能够直接选择添加入库，而后如上图一个相似购物车的小图标上会显示咱们添加的图标个数。

 

被加入库的图片会如图显示，而后咱们点击下载至本地按钮，选择路径会有一个压缩包被下载，解压后长这样：

把它们放在同一个文件夹里。

5.在页面中引入图标（如下图的目录为准）：

个人fonts文件夹就是刚才解压以后的全部文件，demo1.html是引入iconfont的小例，具体代码以下：

须要注意的地方只有三个，一是引入iconfont.css，二是建立一个span或者i标签并给一个iconfont的类名，三是找到图标对应的unicode写在标签中，就是以&符号开头的那个。

而后这个图标就能在页面高清显示了，通常咱们都用font-size来控制它的大小。

最后给你们安利一下如何改变图标颜色，回到图二咱们下载的那些图标，鼠标悬停在想改变颜色的那个，选择下载而后咱们就能选择或输入十六进制色码改变颜色了，而后保存成本身想要的图片格式。

但愿这篇文章能帮助你们，一块儿加油！

http://www.iconfont.cn/