DaRksIde

最近不知道为什么特别喜欢写东西，哈哈哈哈哈

早上在 @格物，志知 博客中的一篇译文中看到关于在axure里使用iconfonts的一段话，恰巧之前对icomoon的在线生成字体功能很感兴趣，就研究了下。

先说说iconfonts的优点吧。

1、无论你是什么分辨率，是否retina，无论你怎么放大（一定极限内），它可以保证图标不会出现任何模糊；

2、可以通过css直接控制图标大小、色彩甚至是投影和浮雕等效果；

3、一份字体文件可以存放很多图标，调用管理非常方便；

4、容量非常小，30个图标只有20k不到的文件大小；（因为它是矢量的）

其实iconfonts使用在前端才能真正发挥它的功能，在axure里使用它其实有点本末倒置、舍近求远的意思了。所以去研究这个纯属无聊~

第一，去往icomoon，网址是：https://icomoon.io/app/#/select，选择完所要的图标后点击下方的fonts按钮，如下图：

第二，下方注意下方圆点里面的内容，那个就是后期你安装完字体后，图标对应的字符，有人可能会问，那么多图标我哪记得住每个图标对应的是哪个符号~别急，后面会说道。然后点击下方的DOWNLOAD，下载字体，如下图：

有同学可能会发现刚到这个页面时没有对应的符号的，别急，是要设置的~如下图：

这样就会有对应的符号了

第三，下载完成后会得到一个叫icomoon的压缩包，解压出文件夹，打开fonts文件夹选择icomoon.ttf这个文件安装，见下图：

之前不是有人问那么多图标怎么记得住对应的符号吗，重点就是那个demo文件，打开它，见下图：

这个文件就等于你的地图或者说明书，后期再使用过程中只要找到想要输入的图标，打开demo文件，复制对应的符号，在axure里输入，就可以得到想要的图标了。

最后就是打开axure，选择刚才安装的字体，然后输入对应的符号，就能看到刚才想要输入的图标了，比如我想得到一个首页的图标，他对应的符号是"，那我只要输入"就能得到这个首页图标了，见下图：

可以通过字体大小和字体颜色来控制图标的大小和颜色。

好了，写的很赶，很多细节的东西没有写出来，比如在icomoon网页里的设置等等，icomoon最吊的地方是你可以自己上传SVG的矢量文件，然后生成iconfont来使用。什么？你不知道SVG是什么？没关系，icomoon已经免费提供600多个免费的图标供你使用了，对于平常的使用已经绰绰有余了。

如果你觉得这个方法不错，祝你早日有一个自己的图标字体库。