[html]字体图标的使用

说明

字体图标在web上是使用的比较广泛的，与精灵图相比，字体图标更易扩展和维护，具体使用效果如下（以天猫为例）

天猫图标字体使用示例

1 下载字体图标(推荐IcoMoon)

IcoMoon官网

因为是国外的网站，打开可能需要一点时间！
打开后是这个样子
点击右上角IcoMoon App即可进入免费字体图标页面

IcoMoon首页

第一步：找到并选中需要的图标，以第一个为例
第二步：点击右下角Generate Font

icoMoon免费图标

第三步：点击右下角Download即可下载选中的图标字体相关文件

IcoMoon

下载后会获得以下文件，fonts文件夹是我们工程需要的字体图标文件

IcoMoon文件

2 使用字体图标

第一步：复制fonts文件夹到项目中，在css文件中引入fonts文件，引入代码在下载的字体图标style.css文件中，复制即可，注意修改引入路径

字体图标引入

IcoMoonstyle.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文件即可

追加字体图标