轉：https://www.jianshu.com/p/5d4a39cdf96d

圖示技術哪家強？
你腦海中第一個閃現的，必然是 fontawesome、ionicons、google icons...是的，確實很方便，直到今天之前，我還在用著FA，還在為了一個圖示翻遍他的網站，就像這樣：

image.png

不得不說，這是一件很費眼睛的工作， 但最要命的是:

絕大多數時候你無法找到想要的圖示

用Ctrl+F也沒用，他的圖示命名都很奇特。。。
其它幾個情況類似，總結下來就是，實際工程中幾乎沒用，font-awesome一共只有 249 個圖示，就像16G的記憶體，根本不夠用。

幸好這個世界上還有一個網站叫IconFont

image.png

oh my dog，看到圖示數量，根本不在一個數量級，基本任意關鍵詞都能搜到。搜到後，提供svg、png、ai三種格式下載，我也一直是這樣乖乖下載用的。這也是為什麼我一直沒有拋棄awesome的原因。因為iconfont圖示再多，也是圖片啊，哪有<i class="fa fa-start"></i>寫起來帶感啊！
但是，慢著，就在今天，我發現了一個iconfont的隱藏功能，這貨居然也能製作字型圖示！
以下內容摘自官網：

font-class引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點：
相容性良好，支援ie8+，及所有現代瀏覽器。
相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。
不過因為本質上還是使用的字型，所以多色圖示還是不支援的。
使用步驟如下：
第一步：拷貝專案下面生成的fontclass程式碼：

//at.alicdn.com/t/font_1473319176_4914331.css
 

第二步：挑選相應圖示並獲取類名，應用於頁面：

<i class="iconfontyyy icon-xxx"></i>

自己試驗了一下：步驟是這樣的

1. 先逛超市，看中了放進購物車：

    

   

   image.png

2. 挑的差不多了，到購物車“新增到專案”，沒有專案就新建一個

    

   

   image.png

3. 把上面//at.alicdn.com/t/font_vcfgzbqaivk7qfr.css這樣一段程式碼 在你的頁面中引入：

<link rel="stylesheet" href="//at.alicdn.com/t/font_vcfgzbqaivk7qfr.css">

1. voila！在頁面中任何地方，像使用fomt-awesome那樣歡快的使用iconfont吧！
   示例：使用上面那個user圖示：

 <i class="iconfont icon-user"></i>

總結一下：

1. iconfont完全可以替代所有字型圖示庫，重要的還是國產的，網速沒問題
2. 這樣的打包體積更小，更定製，以往，哪怕只用一個圖示 ，也要下載整個圖示庫，太不環保了！
3. 圖示庫龐大到感動，媽媽再也不用擔心我找不到圖示了
4. 還有彩色圖示可以用哦

最最後，真的是今天才發現這個功能，已經知道的同學滿拍磚，慢走。

作者：Angeladaddy
連結：https://www.jianshu.com/p/5d4a39cdf96d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。