使用網絡字體做爲矢量圖標

前面已經介紹過網絡字體（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