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

前面已经介绍过网络字体（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