icomoon：生成字体图标的方法并应用

字体图标任意缩放不会失真，也大大减少请求数量，非常好用。

在线生成工具：https://icomoon.io/app/#/select

在线SVG图库（阿里）,  用于导入：http://www.iconfont.cn/search/index?q=%E9%92%B1&page=1    

 

1、进入网址：主页面

 

 

2、新建一个图集

 

 

3、添加.svg图片（可以使用现成的，也可以使用自定义的）

使用现成的点击页面红色的Add Icons...

使用自定义的直接拖拽进图集即可添加

 

 

 

4、生成字体文件

（1）切换工具栏 “选择” 标签（见下图），选择好要生成的图标（自由选择）

（2）点击底部的："Generate Font F"

 

可以自由命名 具体图标的样式名：

 

 

5、修改完成后，点击生成Font

 

 

下载压缩文件，解压：

 

 

 

运用：将fonts文件夹全部内容和style.css文件放到相应的项目中。

 

 

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

 

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