以下全是個人觀點，不喜勿噴
1. 之前遇到圖標的處理方式
以京東商城做例子：
在京東商城首屏的右下角有這樣的一個效果（看圖標）
京東商城圖標案例
我們遇到這樣的樣式會去尋找多個小圖標小圖片（或者css sprites），然后當作背景圖的方式引入到相對應的i標簽中。
假如遇到了以下情況：
鼠標懸浮后，圖片變色
當一個動作觸發后，需要改變圖片的顏色，那么我們只能再換張圖片替代原來的位置。
如果這樣的情況發生，我們有沒有其他的處理方式？
2. 有沒有更好的方式
Icon（圖標）在開發中經常見到，如分享、回復、贊、返回、話題、訪問、箭頭等等。
- 如果使用背景圖的方式引入，在移動端自適應的布局上，頁面可能會自適應的放大，那么圖標放大后就會顯示的模糊不清晰。
- 如果觸發改變圖標樣式，就可能需要重新定義背景圖路徑和位置。
- 當然，不小心之間你也會碰到其他很煩心的問題。
所以，為了防止你突然需要的時候，我們現在尋求一種更好的方式。
3. 圖標字體
WHAT? 什么是圖標字體？
不解釋了，直接看圖吧(再次借用我最愛的京東)
目前新版京東的圖標難道你要讓我寫這個？？？？
肯定不是呀，那這個是什么玩意兒呢？
- 字體圖標可以做透明、旋轉等圖片可以做的事情
- 本質是文字，可以很隨意改變顏色、產生陰影、透明效果；
- 本身體積小，攜帶的信息沒有削減
- 幾乎支持所有瀏覽器(當然包括你首先想到的IE)
- 移動設備必備
廢話別多說，怎么用？
3. 圖標字體的使用
要想獲取圖標字體，大多數兩種途徑（能自己畫出來的大神請帶我），第一找到付費網站購買，第二就是到免費網站下載，
免費下載網站很多，網上搜索圖標字體庫一大堆，多的你用不完
我經常使用的是阿里巴巴圖標庫（https://www.iconfont.cn/）,本次也就拿這個圖標庫當案例講解。
首先你需要登錄
登錄入口
2種登錄方式供你選擇（阿里員工除外 ???）
登錄方式選擇
首選當然建議github登錄，因為畢竟是世界最大男性交友平臺。畢竟一個項目可能要用到很多的圖標，我們何不整理一下呢？
找到我的項目
我的項目
然后新建項目
新建項目
新建項目的定義然后在搜索框輸入你想要的圖標名稱，比如我來 biu～一下
搜索biu找到你所需要的圖標
image.png然后點擊購物車
加入購物車然后繼續尋找你要的圖標，當圖標都加入購物車完成之后，我們當然就要進入購物車啦
點擊右上角購物車確認一下你的購物車是不是你要剁手的內容，然后點擊購買，不對，是點擊添加至項目。
image.png這樣你就看到你添加的圖標了，點擊
font class選項（當然最常用的，也是兼容性好的）
選擇圖標類型顏色不滿意？大小不滿義？沒關系，你鼠標放在圖標上，點擊小筆筆～修改成你的feel吧
選擇修改
愛怎么改怎么改
接下來呢,你有兩種選擇，一種是把生成的css下載到本地，一種是在線鏈接，我們說一下在線鏈接。
點擊 查看在線鏈接 按鈕（如果出現 暫無代碼 的提示，請多點幾下按鈕）
在線鏈接按鈕
在線鏈接按鈕到這里開始你的表演吧！打開編輯器，在
link標簽中寫入剛才的地址
然后在你需要的位置寫一個標簽（案例使用i標簽）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" > </head> <body> <i class="iconfont iconBiu"></i> </body> </html>咿呀，這時候你發現，我的i標簽中多兩個類名，這個是什么?
你還記得剛創建項目的時候那么界面嗎? 記不得就往上翻一下吧。
第一個類名的來歷
你剛才書寫的這個iconfont就是使用在這里，代表你使用的是這個項目的圖標樣式，那是這個項目的哪一個圖標呢，這個就是第二個類名的含義了。第二個類名從哪里來？你看圖
第二個類名
或者直接復制代碼
復制代碼-類名
運行一下吧。。你會驚喜的發現，哎呀臥槽出來了
運行結果
更神奇的是，它還能設置字號，顏色！！！因為它就是一個文字。
修改樣式
biu～biu～biu～內容就要告一段落了。
不對呀，你還有好多沒講呢，怎么下載使用呀，怎么使用其他的方式呢?來來來 客官看過來。
教程位置
說在最后：這個一切看起來都好。沒有缺點嘛?
除了以上優勢之外，當然也有劣勢
1、圖標字體只能被渲染成單色或者CSS3的漸變色
2、使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。
3、創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。
網上有很多類似的圖標庫，大概使用都是基本差不多，希望大家使用的開心～
結束！！！收工睡覺
