如何使用IconFont？——向量圖示
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【如何使用IconFont？——向量圖示】
1.背景介紹
網上的一些小圖示除了可以使用css精靈圖製作外，還可以使用現在比較熱門的iconfont去製作。那麼首先搞清楚一個問題，什麼是iconfont？icon font顧名思義，可以理解成icon + font即 圖示字型。圖示字型，可以理解為是一種特殊的字型，網頁中的一些小圖示和特殊字元可以通過這種方法實現。簡單來說就是把圖片當成文字來使用。
2.知識剖析
2.1什麼是iconfont？
iconfont，字型圖示。通過使用字型格式的向量圖示來代替以往的圖片格式的小圖示。字型是向量化圖形，它天生具有「解析度無關」的特性，在任何解析度下面，都可以做到完美縮放和擴大，不會像傳統圖片一樣，增大到一定程度就會出現明顯的鋸齒或者變得模糊，影響展示效果。
2.2 如何使用icon font？
提供icon font的網站有很多，例如阿里巴巴向量圖示庫、fontello、icomoon、Font-Awesome、Glyphicon Halflings、Icons8、
我們今天主要就國內使用最多的阿里巴巴向量圖示庫進行介紹。
在阿里巴巴向量圖示庫中，在web端有四種主要的引用方式，分別是icon單個使用、unicode引用、font-class引用、symbol引用。
icon單個使用，單個圖示使用者可以自行選擇下載不同的格式使用，包括png,ai,svg。此種方式適合用在圖示引用特別少，以後也不需要特別維護的場景。
比如設計師用來做demo原型。
前端臨時做個活動頁。
當然如果你只是為了下載圖示做PPT,也是極好的。
不過如果是成體系的應用使用，建議使用者把icon加入專案，然後使用下面三種推薦的方式。
unicode引用，批量引用的方法之一，在網頁端最原始的應用方式。相容性最好，支援ie6+，及所有現代瀏覽器。支援按字型的方式去動態調整圖示大小，顏色等等，由於是字型，所以不支援多色。只能使用平臺裡單色的圖示，就算專案裡有多色圖示也會自動去色。
font-class引用，是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。支援ie8+，及所有現代瀏覽器。相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。使用class來定義圖示，當要替換圖示時，只需要修改class裡面的unicode引用就可以，比較方便。多色圖示還是不支援的。
symbol引用，是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。支援多色圖示了，不再受單色限制。支援 ie9+,及現代瀏覽器。瀏覽器渲染svg的效能一般，不如png。
3.常見問題
問題: 如何在專案中修改圖示的大小和顏色？
4.解決方案
使用一個demo進行演示講解：
demo
5.編碼實戰
6.擴充套件思考
問題: iconfont相比於各種圖片格式的小圖示的優點和弊端？
優點：
1、輕量性：一個圖示字型比一系列的影象要小。一旦圖示字型載入了，圖示就會馬上渲染出來，不需要下載一個影象。可以減少HTTP請求，還可以配合HTML5離線儲存做效能優化。
2、靈活性：圖示字型可以用過font-size屬性設定其任何大小，還可以加各種文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用點陣圖的話，必須得為每個不同大小和不同效果的影象輸出一個不同檔案。
3、相容性：網頁字型支援所有現代瀏覽器，包括IE低版本。詳細相容性可以點選這裡。
弊端：
1、圖示字型只能被渲染成單色或者CSS3的漸變色，由於此限制使得它不能廣泛使用。（已經開始支援彩色圖示）
2、使用版權上有限制，有好多字型是收費的。當然也有很多免費開源的精美字型圖示供下載使用。
3、創作自已的字型圖示很費時間，重構人員後期維護的成本偏高。
7.參考文獻
參考二:圖示字型運用以及其優勢與劣勢
參考四：阿里巴巴向量圖示庫
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。
這裡是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到網際網路行業的聚集地。"
歡迎加IT交流群565734203與大家一起討論交流