讓字體圖標代替雪碧圖，減小請求帶寬

1、什麼是字體圖標  icon font 及使用場景

從百度百科一下什麼事icon font，沒有解析。那就用在使用過程的對字體圖標的理解，解釋一下。

字體圖標就是利用字體來顯示網頁中的的純色圖標，或者是特殊字體。舉個栗子，以下圖

這張圖的三個小icon，都是使用字體圖標的，若是不是使用字體圖標，多是6個小圖片，可能優化以後就是把這6個小圖片作成雪碧圖，還好，如今使用compass能夠自動生成雪碧圖，也是省了一大功夫啊。那麼問題來了，若是是作成雪碧圖，相對於三個字體來講，無疑體積是大的，那麼對待這種純色的圖標，使用字體圖標就最適合不過了。千萬別開心的開心，下面有坑...（留點懸念）。

 

2、使用字體圖標的優缺點

如今作的頁面大部分是響應式設計的，在不一樣的終端顯示，同一個icon在大屏終端確定就比小屏的大。

此處引用w3cplus某篇文章曾經總結的，由於總結的已經很完整的歸納了他的優勢。

• 很容易任意地縮放；
• 很容易地改變顏色；
• 很容易地產生陰影；
• 能夠擁有透明效果；
• 通常來講，有先進的瀏覽器支持；
• 可使用css 裝飾（能夠獲得CSS很好支持）；
• 能夠快速轉化形態（作出一些變化，如 :hover等）；
• 能夠作出跟圖片同樣能夠作的事情（改變透明度、旋轉度，等）；
• 自己體積更小，但攜帶的信息並無削減。

舉個栗子~

這裏的圖標被我放大了不少，可是並無失真。這就是其中一個優勢，能夠任意縮放。

 

 有好必有壞，世間萬物相輔相成。

缺點就是：

一、製做用於生成icon font的svg比較麻煩

二、不適合多色彩的圖標，多色彩的圖片仍須要使用圖片

3、字體圖標的原理是什麼

 在生成字體文件的工具上，導入咱們的svg圖片，就能夠生成對應的字體文件。包括調用圖標的css。真的好神奇。

在這些小icon命名爲icon-tick的svg這個進入大熔爐的時候，是根據什麼算法將這個content的16進制編碼跟每個className對應起來。而後只用使用這個icon-tick的className，就會顯示出圖標來。實在神奇。

這一塊之後搞懂了補上。

 

4、怎麼使用字體圖標

生成字體圖標的工具網站推薦有兩個：

https://icomoon.io/ （我如今使用）

http://fontawesome.io/（很知名的字體圖標網站）

成功使用字體圖標的步驟以下：

 一、跟設計師拿到小icon的svg圖片，而後例如命名爲icon-tick.svg，而後在icomoon.io導入。

看到如圖：

二、此時咱們能夠查看一下，如今經過這個生成字體圖標生成的圖標代碼是什麼。以下圖：

 

三、 點中你想查看的icon，而後點擊Generate Font，此時就看到代碼了。

四、把字體文件下載下來，一會引入到頁面中

解壓後，把這四個文件拷貝到項目的font文件夾。

個人font文件夾和css資源的放在同一級

 

 而後就從download的文件中找到style.css把樣式，以下圖，拷貝到本身的css文件中，這樣在html文件引入這個css文件以後，只要在html文件中添加icon-tick就能夠顯示這個字體圖標，就是這麼愉快的使用上字體圖標了。

 5、結束語

字體圖標在多終端顯示仍是比較有優點的。不再用擔憂放大圖標顯示模糊，也不用擔憂在蘋果的視網膜屏幕模糊，由於它是矢量的。因此若是站點中不少圖標是純色的，推薦使用字體圖標。

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

寫好代碼，快樂生活，噢耶