一、什麼是字體圖標 icon font 及使用場景
從百度百科一下什麼事icon font，沒有解析。那就用在使用過程的對字體圖標的理解，解釋一下。
字體圖標就是利用字體來顯示網頁中的的純色圖標，或者是特殊字體。舉個栗子，如下圖
這張圖的三個小icon，都是使用字體圖標的，如果不是使用字體圖標，可能是6個小圖片，可能優化之後就是把這6個小圖片做成雪碧圖，還好，現在使用compass可以自動生成雪碧圖，也是省了一大功夫啊。那麼問題來了，如果是做成雪碧圖，相對於三個字體來說，無疑體積是大的，那麼對待這種純色的圖標，使用字體圖標就最適合不過了。千萬別開心的開心，下面有坑...（留點懸念）。
二、使用字體圖標的優缺點
現在做的頁面大部分是響應式設計的，在不同的終端顯示，同一個icon在大屏終端肯定就比小屏的大。
此處引用w3cplus某篇文章曾經總結的，因爲總結的已經很完整的概括了他的優點。
- 很容易任意地縮放；
- 很容易地改變顏色；
- 很容易地產生陰影；
- 可以擁有透明效果；
- 一般來說，有先進的瀏覽器支持；
- 可以使用css 裝飾（可以得到CSS很好支持）；
- 可以快速轉化形態（做出一些變化，如 :hover等）；
- 可以做出跟圖片一樣可以做的事情（改變透明度、旋轉度，等）；
- 本身體積更小，但攜帶的信息並沒有削減。
舉個栗子~
這裏的圖標被我放大了很多，但是並沒有失真。這就是其中一個優點，可以任意縮放。
有好必有壞，世間萬物相輔相成。
缺點就是：
1、製作用於生成icon font的svg比較麻煩
2、不適合多色彩的圖標，多色彩的圖片仍需要使用圖片
三、字體圖標的原理是什麼
在生成字體文件的工具上，導入我們的svg圖片，就可以生成對應的字體文件。包括調用圖標的css。真的好神奇。
在這些小icon命名爲icon-tick的svg這個進入大熔爐的時候，是根據什麼算法將這個content的16進制編碼跟每一個className對應起來。然後只用使用這個icon-tick的className，就會顯示出圖標來。實在神奇。
這一塊以後搞懂了補上。
四、怎麼使用字體圖標
生成字體圖標的工具網站推薦有兩個：
https://icomoon.io/ （我現在使用）
http://fontawesome.io/（很知名的字體圖標網站）
成功使用字體圖標的步驟如下：
1、跟設計師拿到小icon的svg圖片，然後例如命名爲icon-tick.svg，然後在icomoon.io導入。
看到如圖：
2、此時我們可以查看一下，現在通過這個生成字體圖標生成的圖標代碼是什麼。如下圖：
3、 點中你想查看的icon，然後點擊Generate Font，此時就看到代碼了。
4、把字體文件下載下來，一會引入到頁面中
解壓後，把這四個文件拷貝到項目的font文件夾。
我的font文件夾和css資源的放在同一級
然後就從download的文件中找到style.css把樣式，如下圖，拷貝到自己的css文件中，這樣在html文件引入這個css文件之後，只要在html文件中添加icon-tick就可以顯示這個字體圖標，就是這麼愉快的使用上字體圖標了。
五、結束語
字體圖標在多終端顯示還是比較有優勢的。再也不用擔心放大圖標顯示模糊，也不用擔心在蘋果的視網膜屏幕模糊，因爲它是矢量的。所以如果站點中很多圖標是純色的，推薦使用字體圖標。
20170228補漏寫的坑
事情經過是這樣的，我做一個跑流程的頁面，會有步驟二那裏可能會有“扣款”“未全額扣款”“等待扣款”等，所以對應的icon會不一致，需要我在不同的狀態修改一下icon。下圖：
可以看到生成的css文件，有很多icon對應的十六進制代碼，
.icon-feedback:before{content: "\e900"}
.icon-choose:before{content:"\e609"}
我的想法：
那要切換很容易啊，跟我們平時切換雪碧圖時一樣修改background-position的值就好。所以要切換字體圖標一樣的道理嘛，就是修改一下content對應的十六進制的代碼。完美解決！
但是你確定這裏的編碼是固定不變的嗎？我們的icon會不斷的被加進來，那麼這裏的編碼會唯一不變嗎？答案是否定的。當你從你的svg裏面刪除或添加一個icon，那麼這裏的其他icon的content對應的編碼就會發生微小變化，也就是說坑爹咯，你如果使用修改content的值去切換icon，那就是掉坑了，切記不能這樣做！！
原因：https://icomoon.io/利用工具生成字體文件時，因爲你icon的增減之後會重新編碼。
正確的做法：生成的字體文件，拷貝這些css樣式到我們的文件裏，然後調用的時候就使用這些icon的className，千萬不要去修改content的內容。當你要根據不同狀態顯示不同的icon的話，那就只能麻煩一點咯，順便把這個icon的class也切換了。
參考文章：
http://www.w3cplus.com/css3/icon-fonts.html
https://isux.tencent.com/icon-font.html
寫好代碼，快樂生活，噢耶