圖標(biāo)技術(shù)哪家強(qiáng)添谊？
你腦海中第一個閃現(xiàn)的财喳，必然是 fontawesome、ionicons、google icons...是的耳高，確實(shí)很方便扎瓶，直到今天之前，我還在用著FA泌枪，還在為了一個圖標(biāo)翻遍他的網(wǎng)站概荷，就像這樣：
不得不說，這是一件很費(fèi)眼睛的工作碌燕， 但最要命的是:
絕大多數(shù)時候你無法找到想要的圖標(biāo)
用Ctrl+F也沒用误证，他的圖標(biāo)命名都很奇特。修壕。愈捅。
其它幾個情況類似，總結(jié)下來就是慈鸠，實(shí)際工程中幾乎沒用蓝谨，font-awesome一共只有 249 個圖標(biāo)，就像16G的內(nèi)存青团，根本不夠用譬巫。
幸好這個世界上還有一個網(wǎng)站叫IconFont
oh my dog，看到圖標(biāo)數(shù)量壶冒，根本不在一個數(shù)量級缕题，基本任意關(guān)鍵詞都能搜到。搜到后胖腾，提供svg、png瘪松、ai三種格式下載咸作，我也一直是這樣乖乖下載用的。這也是為什么我一直沒有拋棄awesome的原因宵睦。因?yàn)閕confont圖標(biāo)再多记罚，也是圖片啊，哪有
<i class="fa fa-start"></i>寫起來帶感翱呛俊桐智！但是，慢著烟馅，就在今天说庭，我發(fā)現(xiàn)了一個iconfont的隱藏功能，這貨居然也能制作字體圖標(biāo)郑趁！
以下內(nèi)容摘自官網(wǎng)：
font-class引用
font-class是unicode使用方式的一種變種刊驴，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比捆憎，具有如下特點(diǎn)：
兼容性良好舅柜，支持ie8+，及所有現(xiàn)代瀏覽器躲惰。
相比于unicode語意明確致份，書寫更直觀〈〔Γ可以很容易分辨這個icon是什么氮块。
因?yàn)槭褂胏lass來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時太伊，只需要修改class里面的unicode引用雇锡。
不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的僚焦。
使用步驟如下：
第一步：拷貝項(xiàng)目下面生成的fontclass代碼：
//at.alicdn.com/t/font_1473319176_4914331.css
第二步：挑選相應(yīng)圖標(biāo)并獲取類名锰提，應(yīng)用于頁面：
<i class="iconfontyyy icon-xxx"></i>
自己試驗(yàn)了一下：步驟是這樣的
-
先逛超市，看中了放進(jìn)購物車：
image.png -
挑的差不多了芳悲，到購物車“添加到項(xiàng)目”立肘，沒有項(xiàng)目就新建一個
image.png - 把上面
//at.alicdn.com/t/font_vcfgzbqaivk7qfr.css這樣一段代碼 在你的頁面中引入：
<link rel="stylesheet" >
- voila！在頁面中任何地方名扛，像使用fomt-awesome那樣歡快的使用iconfont吧谅年！
示例：使用上面那個user圖標(biāo)：
<i class="iconfont icon-user"></i>
總結(jié)一下：
- iconfont完全可以替代所有字體圖標(biāo)庫，重要的還是國產(chǎn)的肮韧，網(wǎng)速沒問題
- 這樣的打包體積更小融蹂，更定制，以往弄企，哪怕只用一個圖標(biāo) 超燃，也要下載整個圖標(biāo)庫，太不環(huán)保了拘领！
- 圖標(biāo)庫龐大到感動意乓，媽媽再也不用擔(dān)心我找不到圖標(biāo)了
- 還有彩色圖標(biāo)可以用哦
最最后，真的是今天才發(fā)現(xiàn)這個功能约素，已經(jīng)知道的同學(xué)滿拍磚届良，慢走。
