字体图标库之icomoon.io

icomoon是一个图标很全的字体库，以下介绍一下使用方法。
1.首先，打开官网https://icomoon.io/
2.点击右上角的icomoon APP
3.如果需要上传ui制作的svg文件，则点击左上角的Import Icons（上传文件）---->Untitled Set---->点击即可选择下载。
如果是下载网站上已有的字体图标，则选项相应的字体图标后点击右下角的Genetate Font---->点击右下角的Download
4.这时候我们会获得一个icomoon压缩文件，解压后的文件如下：

文件夹.png
这个文件夹的每一个文件都有用，请不要随意删掉
接下来我们主要有两种方式可以在项目中使用字体图标
第一种是添加伪元素的方式
首先需要在项目的样式文件中声明字体： 告诉别人我们自己定义的字体（路径一定要根据自己的文件存放位置改对，这样才能让css文件成功的找到我们要引入的fonts。）

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

然后需要给要使用字体的标签声明字体，如span

span {
    font-family: "icomoon";
}

最后给这个标签添加伪元素

span::before {
         content: "\e900";
    }
//或者  
<span></span>  

对应的代码去demo.html中查找。
第二种方式是通过类样式使用字体图标
我们需要在项目中引入style.css这个文件，同时fonts文件夹也是需要放到style.css能够引用到的项目文件中。
接下来在要使用字体的标签上添加“iconmoon icon-xxx”就可以了，icon-xxx也可以在demo.html文件中查找
5.追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
把压缩包里面的selection.json 重新上传，然后，选中自己想要新的图标，用新下载压缩包解压出来的文件，替换掉原来的文件即可。