字体图标库

字体图标库

使用阿里巴巴图标库生成iconfont字体图标

iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制，但是缺点就是只能实现一种颜色，不能像图片那样含有各种颜色。

通过阿里巴巴图标库制作字体图标步奏如下（默认已注册阿里巴巴图标库）：

由于别人写的特别好了，所以直接上一个网址，我只补充几点

参考地址

补充

文章中第五步说的是把iconfont.woff添加到项目中，其实不然，为了做好兼容性，和跨终端的共用，所以要把这两个文件也添加到项目中，iconfont.ttf 和 iconfont.svg。而iconfont.css直接复制到项目中就可以了。

这里建议下载图标的时候新建一个项目，这样以后可以向这个项目中添加字体图标，生成后再重新下载覆盖就可以了。当然，也可以用线上地址，这样就只是在iconfont.css文件中添加新增加的图标的类名就可以了，完全不用下载覆盖。如果图标不多的话建议不要用线上地址，考虑性能。

小程序引用字体图标库

小程序中有自己的规则，它不支持ttf/woff/eot等文件，所以我们必须将文件转为base64格式再引入。那么这里就要用到一个工具 transfonter

1、在阿里图标库下载要用的图标项目文件
2、将iconfont.ttf添加到transfonter上（Add fonts)注意勾选的选项
3、下载（点击Convert）
4、把iconfont.css放到项目里。从下载的文件里。用stylesheet.css内容替换iconfont.css的头部引入部分
大功告成