icomoon的用途以及怎么用

icomoon  打个比方, 就是你需要买水果, 点了一份外卖, icomoon就把你要的水果全部打包给您送过来, 然后,你需要的时候, 自己拿过来, 然后取出相应的水果就行了.

icomoon 可以将.svg结尾的文件生成字体图标, 字体图标放大缩小的时候不会失真

下面就来讲讲如何使用icomoon

进入IconMoon编辑页面

首先进入IcoMoon的首页  https://icomoon.io/

点击右上角的

点击之后进入页面

1.如果想要添加自己的图标

点击左上角的那个三横的那个按钮

再选择新建一个空的集合(New Empty Set)

新建完之后就会出现一个空的集合

再点击左上角的 Import Icons 

,就可以导入自己想要的svg文件了

2.导入系统自定义的一些图标

点击左上角的

之后就进入页面

里面有一些是收费的, 也有很多是免费的, 点击相应图标下方的

 就可以了

选择图标.并且下载

点击图标即可以选择了, 加了边框的即为选择了的图标

下方也有您选择的图标的个数显示  

选好图标之后,点击最下方的创建字体就可以了

点击创建字体之后出现了新页面,即字体编辑页面

这个为字体的名字

这个为字体的编号

点击下方的Download

即可以进行下载

字体应用到html中

下载好字体后解压

将 fonts文件夹, 以及style.css放入工程中 

并将style.css导入到index.html中

style.css中的内容

根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size，也可以根据实际情况设置color改变其颜色。

类名,如 ico-qq是给html中用的, 

content后面的编码就是 自己设置的时候弄的编码

最后就可以应用自己的字体啦. 很简单, 只要给自己的div 等标签加一个相应的类就行了

最后的结果