字体图标库之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"; } 或者对应的代码去demo.html中查找。 

第二种方式是通过类样式使用字体图标 我们需要在项目中引入style.css这个文件，同时fonts文件夹也是需要放到style.css能够引用到的项目文件中。 接下来在要使用字体的标签上添加“iconmoon icon-xxx”就可以了，icon-xxx也可以在demo.html文件中查找 

5.追加新图标到原来库里面 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做 把压缩包里面的selection.json 重新上传，然后，选中自己想要新的图标，用新下载压缩包解压出来的文件，替换掉原来的文件即可。

本文章由javascript技术分享原创和收集