使用网络字体作为矢量图标

前面已经介绍过网络字体（Web Fonts），而网络字体也可以作为图标字体（Icon Fonts）来用。图标字体是指把每个图标制作为字体的一个字符，从而组成的字体。这些字符自然是矢量图形，因此可以适应不同的大小，也可以随意调整颜色等。

以 Font Awesome 这个图标字体为例。既然是网络字体，自然需要先引入它：

@font-face {
    font-family: "FontAwesome";
    src: url("fontawesome.woff") format("woff"),
         url("fontawesome.svg#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

实际上，为了兼容各个浏览器，src 中还需要加上 eot，ttf，otf 等格式字体的 url，这里省略。

接下来，按照字体的说明，比如我们要使用五角星符号，可以在 CSS 中添加如下样式：

.fa {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
}
.fa-star:before {
    content: "\f005";
}

其中 F005 是该符号在 Font Awesome 字体中的 Unicode 编号。一般来说，图标字体中各字符会在 Unicode 私有使用区（Private Use Areas）中编号，即在 E000 和 F8FF 之间。

现在，如果你给网页某元素设置 class 为 fa 和 fa-star，将会显示出该五角星符号来：

<i class="fa fa-star"></i>

图标字体有个明显的缺点是，图标只能为单色，而不能为彩色。（ 在 SVG 字体的规范中字符是可以是彩色的，但是作为网络字体，一则 IE 和 Firefox 不支持，二则即使在支持的浏览器似乎也没法用彩色字符。）因此，如果要用彩色的矢量图标，惟一可能的做法是用直接用 SVG 图形。

参考资料：
[1] CSS-Tricks - HTML for Icon Font Usage
[2] CSS-Tricks - Icon Fonts are Awesome
[3] Font Awesome, the iconic font designed for Bootstrap
[4] Elusive-Icons Webfont | shoestrap.org
[5] IcoMoon--limited- flat vector icons
[6] Iconic Icon Set - icons in raster, vector and font formats
[7] Raphael Icons