icon 的前生今世 & iconfont 的晉級之路

　  布吉島爲啥起了個這麼文(dou)藝(bi)的名字，話很少說，開始總結👇。

 

1⃣️發展過程

1. 雪碧圖：

        起初，大部分圖標都是用 img 來實現的。漸漸發現一個頁面的請求資源中圖片 img 佔了大部分，因此爲了優化有了image sprite 就是所謂的雪碧圖，就是將多個圖片合成一個圖片，而後利用 css 的 background-position 定位顯示不一樣的 icon 圖標。 

      但這個合成小圖片爲雪碧圖的方式也有一個很大的痛點，維護困難。每新增一個圖標，都須要改動原始圖片，還可能不當心出錯影響到前面定位好的圖片，並且一修改雪碧圖，圖片緩存就失效了，長此以往就不知道該怎麼維護了。

2.  Font Awesome：

       後來漸漸地一個項目裏幾乎不會使用任何本地的圖片了，而使用一些 font 庫來實現頁面圖標。常見的如 Font Awesome ，使用起來也很是的方便，但它有一個致命的缺點就是找起來真的很不方便，圖標少，定製性不友善。

3. iconfont：

      iconfont 更增強大，它阿里作的開源圖庫，還有專門的 github issue，圖標數量不少，不只有幾百個公司的開源圖標庫，還有各式各樣的小圖標，還支持自定義建立圖標庫 ，給前端開發帶來了很大便利。

 

2⃣️iconfont的3種使用方式

1. unicode:

   優點： 兼容性最好，支持ie6以上。而且能按照字體的方式調整圖標大小，顏色。 

   劣勢： 不支持多色圖標。在不一樣設備的瀏覽器渲染會有差異，圖標顯示的位置，大小可能受css影響，很差調整。書寫不直觀，語意不明確。

     使用方法：引入自定義字體 `font-face；定義使用iconfont的樣式；挑選相應圖標並獲取字體編碼，應用於頁面

 

 

2. font-class:

     特色： 兼容性良好，支持ie8+，相比於unicode語意明確，書寫更直觀

     使用方法：拷貝項目下面生成的fontclass代碼; 挑選相應圖標並獲取類名，應用於頁面

     主要原理：實際上是和 unicode 同樣的，它只是多作了一步，將原先&#xe604這種寫法換成了.icon-QQ，它在每一個 class 的 before 屬性中寫了unicode,省去了人爲寫的麻煩。如 .icon-QQ:before { content: "\e604"; }

     坑： 一個項目中用到了兩組font-class，必定要注意命名空間的問題。

 

 

3. symbol:

    支持多色圖標；支持font-size調整樣式；支持ie9+；可用css實現動畫；減小http請求；矢量，縮放不失真 ；能夠精細控制SVG圖標部分細節

       使用svg-icon的好處：不再用發送woff|eot|ttf| 這些不少個字體庫請求了，svg均可之內聯在html內。

 

       使用方法： 第一步：拷貝項目下面生成的symbol代碼，引入 ./iconfont.js；加入通用css代碼（引入一次就行）；挑選相應圖標並獲取類名，應用於頁面

 

       擴展：svg 是一個真正的矢量，無論你再怎麼的放縮它都不會失真模糊，如今ui設計師平時都喜歡使用 sketch 來工做，只要輕鬆一鍵就能導出 svg 了，因此 svg 也更受設計師的青睞。

 

  

參考文檔：  iconfont    Font Awesome  將來必熱：SVG Sprite技術介紹