说明
字体图标在web上是使用的比较广泛的，与精灵图相比，字体图标更易扩展和维护，具体使用效果如下（以天猫为例）
天猫图标字体使用示例
1 下载字体图标(推荐IcoMoon)
因为是国外的网站，打开可能需要一点时间！
打开后是这个样子
点击右上角IcoMoon App即可进入免费字体图标页面
IcoMoon首页
第一步：找到并选中需要的图标，以第一个为例
第二步：点击右下角Generate Font
icoMoon免费图标
第三步：点击右下角
Download即可下载选中的图标字体相关文件
IcoMoon
下载后会获得以下文件，
fonts文件夹是我们工程需要的字体图标文件
IcoMoon文件
2 使用字体图标
第一步：复制
fonts文件夹到项目中，在css文件中引入fonts文件，引入代码在下载的字体图标style.css文件中，复制即可，注意修改引入路径
字体图标引入
IcoMoon
style.css示例代码
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wm58se');
src: url('fonts/icomoon.eot?wm58se#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wm58se') format('truetype'),
url('fonts/icomoon.woff?wm58se') format('woff'),
url('fonts/icomoon.svg?wm58se#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
第二步：编写
HTML，像使用文字一样使用字体图标，打开下载的IcoMoon文件中的demo.html，如下图所示，找到需要的图标，点击并复制图中所示，粘贴在代码中即可
调用字体图标
代码示例
调用字体图标
最终效果
效果示例
3 追加字体图标
之前下载的字体图标不全，没有我想要的怎么办，难道还要再下载一份字体图标文件吗？
没关系，我们在之前的基础上追加字体图标即可！
第一步：打开
IcoMoon网站，进入IcoMoon App
第二步：点击左上角Import Icons，导入之前下载的字体图标文件中的selection.json，然后页面上就会出现之前下载的字体图标，可以对之前的字体图标进行删除，也可以在下方继续添加需要的字体图标，最后使用最新下载的fonts文件即可
追加字体图标
