所謂字體圖標，顧名思義就是圖標以字體的形式存在，可以利用 font-size、color 對字體圖標的大小和顏色進行渲染。將小圖標集中放到字體庫里，利用css3 @font-face 引用圖標，不僅有利用圖標的集中化管理，也有利於搜索引擎的優化。
圖標建議使用 iconfont.cn（阿里巴巴矢量圖標庫），該網站的一些功能給前端工作提供了很多方便。在該網站的代碼應用頁面講解了圖標在web端的使用，里面涉及到三種引用方式，這篇文章將着重講解第二種方式——font-class引用。
一、font-class特點
在 iconfont.cn 里是這樣介紹font-class的特點的：
- 兼容性良好，支持ie8+，及所有現代瀏覽器。
- 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
- 因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
- 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
二、font-class使用
1、登錄 iconfont.cn ，方便管理項目。
2、搜索圖標名，如“首頁”，選擇一個圖標，點擊“添加入庫”。如圖：
3、點擊右上角購物車圖標，進入已選圖庫。如圖：
4、選擇“添加至項目”，如果沒有項目就先添加一個項目，然后選擇一個項目，點擊“確定”。如圖：
5、確定之后進入我的項目頁面，可以看到引用方式默認是Font class, 點擊“下載至本地”，將壓縮包下載到本地。
6、下載后的文件目錄如圖：
對於我們目前來說，有用的文件只有：
編輯器打開iconfont.css文件：
解釋一下這個文件內容：
(1)@font-face 引用四種格式的字體圖標文件，目的是為了兼容不同瀏覽器；
(2).iconfont 所有圖標的公共樣式；
(3).icon-shouye “首頁”圖標的引用類名；
再來看一下html文件是怎么引用圖標的：
一目了然，紅色框里的就是引用首頁這個圖標的方法。so，引用圖標時，都要有.iconfont這個公共樣式類名，再有就是這個圖標的引用類名。
瀏覽器運行html文件，“首頁”圖標就渲染到了頁面上。通過樣式更改color、font-size，圖標的顏色、大小就會發生變化。如圖：
三、編輯圖標
鼠標移入圖標上，顯示4個圖標按鈕，分別是 添加入庫、編輯圖標、刪除圖標、下載圖標，點擊 編輯圖標，進入圖標詳情彈框：
講解：(1)調整圖標大小
(2)編輯圖標名稱
(3)編輯圖標字符編碼（有默認編碼）
四、添加圖標
往項目里添加新圖標的方法和上面說的步驟一樣，有幾點需要說明一下。
1、將壓縮包下載到本地后，只需要把其中的 iconfont.css、.eot、.svg、.ttf、.woff五個文件替換掉之前的文件即可。
2、iconfont.css的內容也可以通過輸入鏈接查看：
點擊紅字獲取新鏈接，瀏覽器打開鏈接，復制新圖標代碼，再粘貼到iconfont.css文件里到即可。如圖：
五、小結
1、編輯圖標，調整圖標大小至容器的邊框，這樣是為了當圖標字體大小一樣時，顯示在頁面上的圖標大小一樣。（之前項目的經驗：兩個圖標font-size值一樣，顯示在頁面上卻不一樣大小，后來調整了圖標的大小才解決了問題）
2、當圖標很多時，為了方便查找圖標代碼，可以將圖標代碼按字母表排列。如圖：
歡迎留言~