在扁平化网页设计中，字体图标有着很好的易用性。结合一年的实际运用，来做一下总结。

使用

可以直接引用开源的第三方字体样式文件，如Font Awesome等。
或者你想要构建一套产品专属的图标，可以注册一个字体图标库，添加一个图标项目，进行创作和使用。

我司使用的字体库是阿里的iconfont。

设计图标我不懂，都是设计师负责产出的。
产出后，可以看到图标的Unicode和font class。

使用时，需要把字体引用@font-face复制到项目公共样式中，可以使用在线字体链接或者下载到本地服务器，然后可以选择两种方式引用。

1.直接使用Unicode

.icon {
    display: inline-block;
    font-family: "iconfont";
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

<i class="icon">&#xe74e;</i>

把Unicode直接写入页面内容中，渲染出图标。

2.使用font class

[class^="icon-"]:before, [class*=" icon-"]:before {
    text-decoration: inherit;
    display: inline-block;
    speak: none;
}
.icon-search:before {
    content: "\f002";
}

<i class="icon-search"></i>

利用伪元素的content属性，把Unicode写到 css 中，不过渲染后还是会在页面展示。

维护

由于要IE7不支持伪元素，所以我们这一直是直接使用Unicode的方式引用图标。
随着图标的增加，使用极其不方便。

1. 写页面时每次引用图标就需要打开图标项目页面去复制 Unicode，这个真心记不住啊！
2. 领导抽风要修改图标，然后图标改过之后 Unicode 发生了变化，然后就需要苦逼的把所有使用这个图标的页面都改一遍 Unicode，还好有 gulp-replace。

当我意识到这是一个大坑时，已经来不及了。。。

在之后，我开始基于字符映射的方式去管理字体图标。

在项目里加了一个图标配置文件。如：

{
    "search": "xe74e",
    // ...
}

前端模版入口会直接把这个图标数据加入页面上下文。由于配置文件定义了语义化的命名，页面使用就方便多了。

<i class="icon">&#<%=icon.search %>;</i>

我这边后端是 .net，不管是什么语言，都只需要在公共类中加个读取图标的方法。这样前端的模版拿到后端也不需要进行什么修改。

然而直接促使我发此文的原因是因为不小心点开了 Font Awesome 用于兼容 IE7 的 css 文件。

.icon-file {
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '' )
}

expression 是 ie 特有的 css 属性，可以在其中写 js 脚本。这样又把图标的维护权交还 css 了。

在 css 中写 js 这种做法肯定是不提倡的，而且一个页面上存在很多的图标，在 ie7 这么恶劣的环境中，渲染速度也是个大问题。我用 IE7 打开 Font Awesome 的页面，速度在30s左右。

这是个问题，又不算问题。😏