一、什么是字體圖標 ?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

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

轉載于:https://www.cnblogs.com/wuyinghong/p/6476333.html

總結

以上是生活随笔為你收集整理的让字体图标代替雪碧图，减少请求带宽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。