icomoon 打个比方, 就是你需要买水果, 点了一份外卖, icomoon就把你要的水果全部打包给您送过来, 然后,你需要的时候, 自己拿过来, 然后取出相应的水果就行了.
icomoon 可以将.svg结尾的文件生成字体图标, 字体图标放大缩小的时候不会失真
下面就来讲讲如何使用icomoon
进入IconMoon编辑页面
首先进入IcoMoon的首页 https://icomoon.io/
点击右上角的
![]()
![](https://img-blog.csdn.net/20170727120928470?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
点击之后进入页面
![]()
![](https://img-blog.csdn.net/20170727121031732?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
1.如果想要添加自己的图标
点击左上角的那个三横的那个按钮
![]()
![](https://img-blog.csdn.net/20170727121052028?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
再选择新建一个空的集合(New Empty Set)
![]()
![](https://img-blog.csdn.net/20170727121508480?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
新建完之后就会出现一个空的集合
![](https://img-blog.csdn.net/20170727121711986?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
再点击左上角的 Import Icons
![](https://img-blog.csdn.net/20170727121740249?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
,就可以导入自己想要的svg文件了
2.导入系统自定义的一些图标
点击左上角的
![](https://img-blog.csdn.net/20170727121859542?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
之后就进入页面
![]()
![](https://img-blog.csdn.net/20170727121910311?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
里面有一些是收费的, 也有很多是免费的, 点击相应图标下方的
![](https://img-blog.csdn.net/20170727121925966?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
就可以了
选择图标.并且下载
点击图标即可以选择了, 加了边框的即为选择了的图标
![]()
![](https://img-blog.csdn.net/20170727121950061?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
下方也有您选择的图标的个数显示
![]()
![](https://img-blog.csdn.net/20170727120853395?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
选好图标之后,点击最下方的创建字体就可以了
![]()
![](https://img-blog.csdn.net/20170727122018314?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
点击创建字体之后出现了新页面,即字体编辑页面
![]()
![](https://img-blog.csdn.net/20170727122323635?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这个为字体的名字
![](https://img-blog.csdn.net/20170727122340219?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这个为字体的编号
![](https://img-blog.csdn.net/20170727122356968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
点击下方的Download
![](https://img-blog.csdn.net/20170727122413831?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
即可以进行下载
![]()
字体应用到html中
下载好字体后解压
![]()
![](https://img-blog.csdn.net/20170727122439062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
将 fonts文件夹, 以及style.css放入工程中
![](https://img-blog.csdn.net/20170727122607973?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
并将style.css导入到index.html中
![]()
![](https://img-blog.csdn.net/20170727122516839?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
style.css中的内容
![](https://img-blog.csdn.net/20160217154731559?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。
当然添加字体还需要设置font-size,也可以根据实际情况设置color改变其颜色。
类名,如 ico-qq是给html中用的,
content后面的编码就是 自己设置的时候弄的编码
![](https://img-blog.csdn.net/20170727122817530?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![]()
![]()
![](https://img-blog.csdn.net/20170727122705189?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
最后就可以应用自己的字体啦. 很简单, 只要给自己的div 等标签加一个相应的类就行了
![](https://img-blog.csdn.net/20170727122718514?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![]()
最后的结果
![](https://img-blog.csdn.net/20170727123138452?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjc3MDk0NjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)