一. icomoon的使用

1. icomoon的网站： icomoon.io/

2. 进入网站后点击右上角icoMoon App

3. 点击左上角的import icons导入本地的svg文件（也可以直接选择该网站现有的svg）

选择本地svg

选择需要的svg

然后就可以点击右下角的Generate font，进入配置网页

4. 下载到本地后可以发现以下目录，将fonts和style.css目录导入自己的项目中

如：fonts目录导入项目的common/fonts下

style.css导入项目的common/stylus，由于我项目是用stylus，所以把styly.css修改成stylus代码变成icon.styl， 可根据自身情况而定

5. 在html css中引用

该图是style.css中的类名

// 类名是style.css文件中给定的类名
// .html
<span class="icon-close"></span>

// .css
.icon-close{
    font-size: 16px
    color: #000
}
    

二. 如何追加新的字体图标

我们在做项目的时候，经常会在后期想添加新的字体图标，方法有两种：

1. 当有第一次制作字体图标下载后生成的.json文件时

1.1 这个比较简单，直接进入icomoon网站-->icoMoon App --> import icons --> 选择第一次生成的.json文件 --> 原先的字体图标出现 --> import icons --> 选择新.svg文件 --> ...（接下来就跟重新制作字体图标差不多，就不过多说）

2. 当我们是团队开发项目，没有一开始的.json文件时

2.1 直接进入icomoon网站-->icoMoon App --> import icons --> 选择新的.svg文件--> Generate font --> 点进左上角的preferences修改文件名（比如第一次我的文件名是icon-music，为了防止重复我把这次的文件名改成icon-music1）--> 下载 --> 复制fonts目录下的文件导入项目common/fonts

2.2 重点来了！！！！

将新的style.css部分代码（见下图）

复制到一开始在项目中的style.css（我是icon.styl）

需要把新的代码中的font-family: 'music-icon1'改成'music-icon'来跟起初的代码统一，修改后：

现在你去引用新的字体图标(icon-music-logo)会发现生效了！！！