字体图标，又名IconFont。
在画页面的时候常常会碰到向下的箭头、向上的箭头、向左的箭头、向右的箭头。 额，当然除了箭头还有这样一些东西…

一个页面可能会有很多这种小图标，如果每个图标当用作图片来加载，速度会很慢。像对勾（√）这种简单又有规则的图标，可以用border+rotate画出来，也可以用雪碧图（CSS Sprit），但都没有字体图标扩展性好，而且放大不失真，比较好维护。

要制作想要的字体图标样式，推荐阿里巴巴字体图标库和IcoMoon,下面记录一下我的使用心得。

收集或自己制作SVG格式图标

在阿里巴巴字体图标库找到需要的图标并下载，比如我需要一个“加”的图标，像这样

点开后可以看到下载图标，点击下载图标进入编辑状态，这时可以选择设置图标的颜色和大小

下面两个图标长得一样，但其实不一样

• 第一个图标只有一个路径，所以整个图标的颜色只能设置成一样的
• 第二个图标有两个路径，可以对每个路径分别编辑

设置完成后，点击【SVG下载】
如此，收集到想要的SVG格式图标，如果找不到多路径分别设置的图标，也可以自己用SVG编辑器重新设计成多条路径。

Web Icon制作

这里制作工具用的IcoMoon App,IcoMoon官网

点击右上角IconMoon App

点击左上角图标选择 new empty set,新建一个空集合

点击import to set,把刚才下载的svg图标导进来

可以看到这些图标有很多都是有颜色的，这些颜色都是在下载的时候设置的

全部选中，点击右下角的 generate font,生成字体，又会出来一个编辑页面

在这个页面会发现，除了有多条路径的图标颜色还在，其他的图标都是灰色的，只有一条路径的图标其实不用设定颜色，因为设了也没用，这个我们可以在css文件里设置color属性添加颜色。
这里可以编辑图标的位置（居中 居右 向左 向下 翻转 镜像等），然后点击Duplicate保存下来

最后一步就是点击右下角的Download,下载一个包，里面有字体文件fonts，和css文件，在项目里引入就好了。