多个字体图标文件的合成

原文地址：https://www.jianshu.com/p/ab16bb8c9860

前言

一直都在使用Iconfont-阿里巴巴矢量图标库中的图标，但是总归是不全的，所以会去其它](http://www.iconfont.cn/)中的图标，但是总归是不全的，所以会去其它地方)

网站下载图标，那么现在就会有多份图标文件，我们该如何去合并它们再应用到项目中去呢？

合并

这个网站IcoMoon可以将.svg的字体图标文件解析出来，并生成新的字体文件包。](https://icomoon.io/app/#/select)可以将.svg的字体图标文件解析出来，并生成新的字体文件包。)

操作流程如下：

1.点击左上角的Import Icons导入图标，图标文件类型是svg，一个svg中可以有多个图标，而阿里的http://www.iconfont.cn/)网站上只能上传svg是一个图标的情况（但是可以同时上传过个svg，不过排序不知道是按什么规则定的，也改不了），上传不同的svg文件后，会彼此隔开

 

 

2.选中要保留的图标

 

 

3.点击右下角的Generate Font

 

 点击之后切换到生成字体页面，可以预览到图标和图标的编码，并且可以在右下角生成字体的按钮旁边有设置按钮进行配置

 

 

4.生成成功后点击Download即可

使用

因为项目中之前一直使用Iconfont的图标文件，所以为了不更改大量代码，我们需要将IconMoon导出的字体图标

改成Iconfont的类型，其实很简单，如下：

1.将IconMoon/fonts的四个文件全部重命名为iconfont。

2.将IconMoon/style.css中的图标部分全部复制，替换掉iconfont.css中的图标部分。

作者：Gorkys
链接：https://www.jianshu.com/p/ab16bb8c9860
来源：简书