使用icoMoon自定义字体文件

项目中要求新增一些自定义的字体文件，由于之前的字体文件库中的字体文件没有新需求所要求的，只好新增字体文件，但是新增字体文件时，最好确定一个整体的字体文件库的范围，一次性生成一个字体文件，否则就会很繁琐。使用icoMoon可以很方便的生成自己想要的字体文件。下面是关于字体文件的生成教程。

1.登录icoMoon官网

        在百度搜索icoMoon或者直接输入https://icomoon.io即可找到官网，有时打开较慢，可能需要翻墙。

2.进入字体制作页面

打开官网如下图所示：

iconMoon的官网截图

点击红框框的选项，进入字体制作的页面

3.添加所需要转成字体文件的icon样式

iconMoon的官网截图

点击Import Icons ，然后从本地上传一个svg图片至该网站上，或者可以直接选择icoMoon提供的free的icon

上传完成后会出现新的一个选项卡，点击选择自己上传的icon。此时需要注意的是：正常上传的svg会有icon的缩略图显示，如果没有显示缩略图，如上图最后一个白框，则代表此svg图片不可以用来制作icon。经测试，对svg图片的要求是：该svg必须是由ai转svg生成的svg图片。此处可以import多个svg图片以供批量生成icon。所以，如果原icon是png格式的，需要先将png转ai，ai再转svg。此处推荐一款ai转svg的工具，vertor magic，用法可以自行百度。

选择好所需的icon后点击下面的generate font（没有截到图不好意思）进入导出字体文件页面

4.设置导出文件名以及导出文件

（1）点击Preferences 可进行字体文件的相关配置，如下图

字体文件配置

font-name是设置字体文件的导出名字，其他的请自行参考

（2）Trade2 和e900 设置的是字体的引用名以及对应的编码，可以自己定义，每个字体的名称和编码不可重复，get code 选项可以具体查看如何使用icon。

（3）点击download 即可下载字体文件。

4.将下载的字体文件导入项目中

下载后的目录

下载后的目录如图所示，只需要在项目中引入以上选中的两个文件，并且在需要使用icon的页面，将css文件导入即可。此处注意引用的路径，css文件里面配置了font文件夹的路径，放到项目中时需要注意匹配。

ps:有的时候引用的icon样式会出乱，此时需要在外层添加一个inherit的样式：