图标作为可视符号，提供了一种 “视觉速记”形式，能够更好的利用熟悉的形状和隐喻以简单的图形形式传达信息。

在b端产品中会涉及很多的“单色”或“多色”图标，功能庞大的产品，图标多达几百个。如果采用png图标，维护和适配起来会非常不便，而且也会增加软件打包的大小。

所以我们一般都是采用“字体图标”或“svg图标”，除一些特殊的插画图标以外。

例：百度云顶部图标就是采用的字体图标（图一），但内容里面用的是svg图标（图二）。一般只会用一种，不过像百度云这种体量大的产品，出现不同类型图标也正常。

例：阿里云基本上都是采用的“字体图标”，毕竟www.iconfont.cn是阿里的。

下面我就把“单色”与“彩色”的制作方法分享给大家

单色图标

第一步：ai中设计1024*1024的图标（保证大小、粗细一致）

第二步：导出eps文件

第三步：打开 FontCreator

第四步：拖入我给的woff文件

第五步：替换“时间”图标或者插入一个空字形

第六步：双击空字形，拖入做好的eps图标

第七步：ctrl+a 选择图标，按F6，调整位置参数如下图

第八步：调整大小为1024，至少保证宽高有一个是1024

第九步：回到字体首页，鼠标右键选择“字体属性”，把弹框中（图一）“右侧轴线”数值改为-4（图二）

改为-4的是让“总宽度为“1024”，改完后我们会发现，图标里面1024位置多了一条红线

第十步：再次回到字体首页，右键“字体属性”，把字体码填写进去就行，程序调用这个码就行。

第十一步：导出woff、woff2（体积非常小）、ttf文件，给到开发就行，这个文件会和产品一起打包，产品里面所有的图标都来自这里的文件。

我这个文件里面有1000多个图标，导出woff2文件才170kb，是不是很小。

多色图标

多色图标其实就是拆分单色图标，分开给颜色

第一步：插入两个空字形

第二步：拆分，把指针选中后剪切、粘贴到另外一个图形中。注意：如果你给2个色，就需要拆分成2个字形，以此类推。

第三步：点击进入左侧空字形，选择下拉中“彩色（默认制式）”

会弹出两个面板，点击“+”,在弹出框中选择拆分的两个字形，需要添加2次

第四步：选择字形，选择要填充的颜色，也可以通过“+”自己添加想要的颜色。选择颜色后，鼠标会变成“油漆桶”图标，在画布中点击你要填入的字形就行。

第五步：回到首页，点击左侧“颜色”节点，我们会发现多了一个彩色图标。到此彩色图标就已经制作完成，和单色图标一样导出给开发就行。

字体文件+字体软件（FontCreator 13）

链接：https://pan.baidu.com/s/1Yi7Uzo_tR981uJMuydgsfw

提取码：bs8r

谢谢大家观看！