Web页面中引用iconfont图标

阿里妈妈出品的 iconfont 是一个矢量图标管理、交流平台，支持矢量图、位图等格式下载，并提供便捷的前端项目植入引用方法，是当前Web开发中主流的icon解决方案。

想要在前端页面中引入图标，一个最原始的做法，就是下载图标的PNG图片格式，然后通过标签引入：

<img src="images/icon.png" />

当页面中图标数量比较少时，采用这种简单的做法并无不当，但如果项目中图标数量较多，并且应用需求比较复杂的时候，就会暴漏出以下问题：

• PNG图片是位图，缩放页面会导致图片模糊。
• 引入后不方便自由调整图标的大小和颜色，需要在外部编辑修改图片之后重新引入。

一个绝佳的解决方案就是 iconfont，在这个平台上不仅可以找到各种精美小图标，还能方便的集成矢量图标到前端项目中。

官方给出了三种 Web端引入方案：

Unicode

这种方案的思路是将图标变成字体引入，然后通过HTML转义字符来引用图标，特点是：

• 可以按照调整字体样式的方法来调整图标样式，如设置 font-size 调整尺寸大小，设置 color 属性修改图标颜色等。
• 因为是字体，所以不支持多色，这里所说的多色，意思是同一个图标里不允许出现多种颜色。

使用方案如下：

每个图标项目都会自动生成一段唯一的Unicode引用代码（CSS样式），在前端项目中将这段代码引入：

@font-face {
  font-family: 'iconfont';  /* project id 964156 */
  src: url('//at.alicdn.com/t/font_964156_pr9i6o2kmf.eot');
  src: url('//at.alicdn.com/t/font_964156_pr9i6o2kmf.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_964156_pr9i6o2kmf.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_964156_pr9i6o2kmf.woff') format('woff'),
  url('//at.alicdn.com/t/font_964156_pr9i6o2kmf.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_964156_pr9i6o2kmf.svg#iconfont') format('svg');
}

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

这里使用 @font-face 定义了一种叫做 iconfont 的字体（名字可以自定义），这个 iconfont 字体就跟微软雅黑、宋体等是一种性质了，为了搞定兼容性问题确保字体引入成功，设置了多种常见格式的字体源引入链接，如 eot、woff、ttf等。

后面这段CSS代码的意思就是，所有类名为 iconfont 的元素字体都强制使用 iconfont 字体族，这样就为HTML转义符转义为“图标”（本质还是字体，只不过长成了图标的样子）做好了铺垫。

然后在需要插入图标的位置插入如下HTML代码，其中的转义符可以在 iconfont 的各个图标中找到：

<i class="iconfont">&#x33;</i>

Font Class

从Unicode的引用方案中我们可以看到，HTML转义符都是形如 &#***; 的样式，书写不直观，语义不明确，使用和维护都有诸多不便。于是 iconfont 推出一套语义化的方案，这就是 Font Class。使用方案如下：

直接在前端项目的HTML头部外链iconfont的图标项目CSS文件：

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_964156_pr9i6o2kmf.css">