现在说起 IconFont，其实已经算比较晚的了，本来还挺纠结要不要写，但是群里的一些朋友还是觉得有意义，于是乎就写吧 ;P

IconFont在今天已经是比较成熟的技术了，不管是公开的素材 Font-Awesome ，还是现在本人追崇的 Material Design（要翻墙），还有国内的 阿里妈妈MUX，还有其他很多，在此就不一一列举了。

既然已经有这么多前提，本人这篇文章主要对这项技术以 UI设计师 的角度作一次总结性质的归纳。

IconFont 是什么？

IconFont拆开来看，就是 Icon 和 Font，这样估计大家应该都能理解是什么，那两者结合是什么呢？没错！就是 IconFont ！别丢砖，难得我卖萌一下，哈哈～

OK，严肃！简单说，就是我们平时用的字体，不再是我们传统认知上的“文字”，而是一个个的图标，请看下图：

大家可以看到右边那里我们熟悉的文字已经不见了，变成了可爱的小图标们～好奇的小伙伴们不要急，后面我就会讲清楚怎么做～

IconFont 怎么制作？

其实有很多方法，这里我只说自己的方法，第一步，还是得老老实实把图标设计好，怎么设计且听我慢慢道来～ 嘿嘿 ；P

No.1

由于我已经是 Material Design 的忠实粉丝，所以制作方法也是基于此来考虑，首先使用的软件是 AI ，有一个标准的参考线

依据参考线制作图标，保证整体视觉的统一性，这个在 IconFont 来说是尤其重要的

如上图所示，在24*24的画布下，图标的常规尺寸为20*20，周边为基础间距，当然一些特殊性的图标也可以溢出，这个就看实际的视觉统一性来考虑了。

以上是Material Design 的示例规范，有兴趣的童鞋可以 看这里 －直接拉下去看 系统图标，前面的 产品图标 请忽略

"

图标的统一性和规范制作方法是烧脑的设计，统一的角度，统一的线条，统一的造型等等，还要让团队的各位设计师都能共同参与设计，都需要有强大的图形塑造系统性思维，共勉～

－By Hengry         "

设计完后，就输出成SVG，到此第一步完成，请看下图：

No.2

在这里隆重再次介绍 Icomoon 的出场，https://icomoon.io/，右上角可以注册，详细的操作按钮也在旁边，请看下图

进去之后，点击 左上角的汉堡包新建一个 New projects，然后再点击很明显的 Import Icons 按钮，把刚刚导出的SVG文件丢进去，或者你直接从文件夹拖过去也行，然后很神奇地你就会看到图标已经在里面了

大家先选 Edit ，再点击图标就会出现上面这张图，可以看到图标的属性，其中Tags 可以自己定义，方便搜索，Nams 就不能那么随便了，因为WEB主要引用的就是这个代号，补充好这个后，最后的输出字体，点击右下角 的 Generate Font 

这里也能再次修正Names 属性，然后还有下面的 Code (e900)是Icomoon 自己生成的，APP主要用 Code ，比较严谨一点一般都有自己的命名规则，在此就不细说了，最后，点击 右下角的 Download 就能下载自己专属的IconFont 了～

另外按钮旁边有个设置按钮，有一些关于图标命名的设定

Demo 是 IconFont的预览，然后字体都在 fonts 文件夹，自行安装字体即可，这个不用我说了吧～

到此，怎么制作自己的 IconFont 就结束了，有疑问的童鞋可以留言。

IconFont 怎么使用？

在这里就不从技术角度去说使用的问题了，这个交给开发GG去考虑即可，对于设计师而言，平时工作中又能起到怎样的便利作用呢？

主要针对 2 个常用软件来说明，分别是  AI  和  PS 

AI2014 ： 文字 > 字形

PS2015： 文字 > 面板 > 字形面板

打开面板之后，找到自己的字体，就可以看到自己的图标都在里面了，使用也很简单，和输入文字一样，直接在面板里面双击即可

而在设计方法的严谨角度上，因为我用的PS，建议大家每次使用的时候都新建一层形状图层命名如 iconsize ，用来绝对定位图标的位置，如下图

以上的做法不仅是为了视觉效果，同样也是在技术实现的角度检验图标的实现效果。

IconFont 的使用就是这么简单，某种程度上能提升一些工作效率，在保证项目图标使用的统一后，后续的维护工作也是要兼顾到的，接下来就是这个收尾工作了。

IconFont 怎么维护？

首先，用IconFont 的好处是什么？

最浅而易见的对设计师而言，就是同一个 Icon 图形，各种大小、颜色都不用专门去输出图片了，技术上直接在代码调整数值就完事，这个简直就爽歪歪了，至于其它的，大家百度一下也有很多文章在说，我就不啰嗦囖～ 当然好处有了，坏处当然也有，维护就是其中之一，下面简单阐述一下个人的维护方法。

首先，作为设计Leader 的你要准备好几件事情：

1. 设定 Icon 图形的制作规范，并给出对应的模版文件；
2. 编写关于图标的命名分类及其命名的规范，还有对应 Code 的编写规则；
3. 专门安排一名设计师负责维护 Icomoon 的添加与字体生成，对应的 Names 和 Code 的编写，还有对设计文件的归类及整理；
4. 给团队的每位设计师讲解流程工作，并开通自己的 Icomoon 帐号，便于检查自己设计的图标；

准备好之后，就是日常平时的需求新增图标的工作流程了，我的方法是：

1. 设计师根据图标的设计规范设计图标，然后输出对应的SVG，打包设计文件交与负责维护的设计师；

2. 负责维护的设计师添加图标后下载当前 Projects 的 json文件保存归档，同时传送 json 文件给对应的设计师检查图标，最后确定没问题了就输出字体；

3. 最后把输出的文件归档，并上传到设计管理共享文件夹，让每位设计师更新 IconFont；

4. 最后的最后，还要通知各个项目的开发GG更新 IconFont 文件，进行最后的检查；

5. 确定没问题后就完事了；

不知道这样纯文字的表达大家会不会晕头转向，但确实就是有这么些繁琐

童鞋们要注意一个点，就是 IconFont 都是单色图标，不能多种颜色，大家自己根据情况评估喔～

下面规范文档会贡献出来，其实就是Material Design 的～ 哈哈～

最后，其实对于实际操作过程还是有不少点要注意的，不过不同项目可能要求也不一样，总之有疑问的童鞋可以留言，有空我都会解答