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