使用icomoon把svg图片生成字体图标

[yhhnx023]

打开在线生成网站：https://icomoon.io/app/#/select

1、引入自己文件

注意：svg件不要加颜色，默认为黑色（设计师处理）；

以这三个svg文件为例！

2、选择文件

3、生成字体图标

4、下载压缩文件

5、项目里引入css

下载之后，主要有两个文件和一个文件夹，其它的可以不用，

• fonts（文件夹重要）
• selection.json（每次增加字体图标时，这个文件要先导入，再添加SVG图）在第6项有截图说明。
• style.css（页面所引用的样式，名字可修改）打开文件截图如下：

以上三个为重要

6、在原基础上增加字体图标

- Selection.json 导入后，之后的步骤请按照第一项说明开始。

7、结合模板使用

• 修改webpack.base.conf.js

• 请在模板main.js中 import 'vue-stone/dist/iconfonts.css'; 注释掉，为了避免样式有冲突，截图如下：

• 在模板中新加自己的字体图标样式，在styles文件夹下加入iconfonts.css（命名可修改）文件，和fonts文件夹，如下图：

注：不建议同时引用两个字体图标样式，不然容易出现冲突，

在原基础上加字体图标请回第6步骤，请 下载 selection.json文件，然后导入即可。