如果你對(duì)iconfont有所了解肉盹，那你一定對(duì)這次iconfont做出的更新產(chǎn)生興趣。沒(méi)錯(cuò)隘弊，iconfont目前已經(jīng)升級(jí)為iconfont+，并且能夠支持大家都很期待的彩色圖標(biāo)。
之前关霸，大家也以文字的形式實(shí)現(xiàn)過(guò)網(wǎng)頁(yè)中的圖標(biāo)和特殊字符，現(xiàn)在鬓长，使用全新的彩色圖標(biāo)一定更能體現(xiàn)
symbol引用:
這是一種全新的使用方式谒拴，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法涉波。相關(guān)介紹可以參考這篇文章這種用法其實(shí)是做了一個(gè)svg的集合英上，與另外兩種相比具有如下特點(diǎn)：
支持多色圖標(biāo)了，不再受單色限制啤覆。 通過(guò)一些技巧苍日，支持像字體那樣，通過(guò)font-size,color來(lái)調(diào)整樣式窗声。 兼容性較差相恃，支持ie9+,及現(xiàn)代瀏覽器。 瀏覽器渲染svg的性能一般笨觅，還不如png拦耐。
這種全新的使用方式耕腾，據(jù)官網(wǎng)介紹說(shuō)是做了一個(gè)svg的集合，SVG（Scalable Vector Graphics）可縮放矢量圖形杀糯，SVG具有什么特點(diǎn)呢?
SVG特點(diǎn)：
1．任意放縮扫俺。（用戶可以任意縮放圖像顯示，而不會(huì)破壞圖像的清晰度固翰、細(xì)節(jié)等狼纬。） 2．文本獨(dú)立。（SVG圖像中的文字獨(dú)立于圖像骂际，文字保留可編輯和可搜尋的狀態(tài)疗琉。也不會(huì)再有字體的限制，用戶系統(tǒng)即使沒(méi)有安裝某一字體歉铝，也會(huì)看到和他們制作時(shí)完全相同的畫(huà)面盈简。） 3．較小文件。（總體來(lái)講犯戏，SVG文件比那些GIF和JPEG格式的文件要小很多送火，因而下載也很快。） 4．超強(qiáng)顯示效果先匪。（SVG圖像在屏幕上總是邊緣清晰种吸，它的清晰度適合任何屏幕分辨率和打印分辨率。） 5．超級(jí)顏色控制呀非。（SVG圖像提供一個(gè)1 600萬(wàn)種顏色的調(diào)色板坚俗，支持ICC顏色描述文件標(biāo)準(zhǔn)、RGB岸裙、線X填充猖败、漸變和蒙版。）
由于svg的格式優(yōu)點(diǎn)是基于xml可擴(kuò)展標(biāo)記語(yǔ)言降允，是一個(gè)XML文件恩闻，而且SVG是被設(shè)計(jì)用于互聯(lián)網(wǎng)，所以通過(guò)Javascript和DOM訪問(wèn)它就是最重要的應(yīng)用模式剧董。通過(guò)Javascript和DOM可以動(dòng)態(tài)地修改HTML幢尚，同樣也可以在瀏覽器中動(dòng)態(tài)地創(chuàng)建、修改和刪除圖片翅楼。
因此在網(wǎng)頁(yè)中使用svg與其他圖像格式相比（比如JPEG 和GIF）的優(yōu)勢(shì)在于:
SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改 SVG圖像可被搜索尉剩、索引、腳本化或壓縮 SVG是可伸縮的 SVG圖像可在任何的分辨率下被高質(zhì)量地打印 SVG可在圖像質(zhì)量不下降的情況下被放大
而瀏覽器的支持情況毅臊，iconfont官網(wǎng)也有說(shuō)明： Internet Explorer 9理茎、Firefox、Opera、Chrome 以及Safari 支持內(nèi)聯(lián)SVG皂林。Internet Explorer 8或更早版本朗鸠，可通過(guò)安裝Adobe SVG Viewer以支持SVG。
iconfont官網(wǎng)描述瀏覽器渲染svg的性能一般式撼，還不如png童社，實(shí)測(cè)了一下做了幾個(gè)彩色小icon，現(xiàn)代瀏覽器對(duì)svg渲染其實(shí)也相當(dāng)不錯(cuò)了著隆。而且iconfont平臺(tái)也是推薦這種全新的使用方式，現(xiàn)在互聯(lián)網(wǎng)技術(shù)迅猛發(fā)展呀癣，相信不久的將來(lái)這種使用方式會(huì)是未來(lái)的主流美浦。
介紹了那么多，那么來(lái)做個(gè)小案例體驗(yàn)一下项栏。
首先還是到iconfont官網(wǎng)浦辨，這次找?guī)讉€(gè)彩色的圖標(biāo)：
網(wǎng)頁(yè)導(dǎo)航欄多色圖標(biāo)庫(kù)，點(diǎn)進(jìn)去會(huì)發(fā)現(xiàn)很多多色圖標(biāo)庫(kù)的集合：
找到對(duì)應(yīng)的圖標(biāo)保存到項(xiàng)目后沼沈，去圖標(biāo)管理—我的項(xiàng)目里面流酬，找到新添加的項(xiàng)目并下載到本地，下載下來(lái)解壓后我們可以看到這些文件：
iconfont+除了全新的使用方式列另，傳統(tǒng)的使用方式也進(jìn)行了一些優(yōu)化芽腾，詳細(xì)可以參考demo文件：
首先第一個(gè)demo文件打開(kāi)是font-class引用
font-class是unicode使用方式的一種變種，主要是解決unicode書(shū)寫(xiě)不直觀页衙，語(yǔ)意不明確的問(wèn)題摊滔。
與unicode使用方式相比，具有如下特點(diǎn)：
兼容性良好店乐，支持ie8+艰躺，及所有現(xiàn)代瀏覽器。 相比于unicode語(yǔ)意明確眨八，書(shū)寫(xiě)更直觀腺兴。可以很容易分辨這個(gè)icon是什么廉侧。 因?yàn)槭褂胏lass來(lái)定義圖標(biāo)页响，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用伏穆。 不過(guò)因?yàn)楸举|(zhì)上還是使用的字體拘泞，所以多色圖標(biāo)還是不支持的。
使用步驟如下： （注意:****為了瀏覽器更好的渲染枕扫，如果只使用單色圖標(biāo)陪腌，建議不要選擇下載多色圖標(biāo)替代）
第一步：引入項(xiàng)目下面生成的fontclass代碼：
<link rel="stylesheet" type="text/css" href="./iconfont.css">
(****這種方式是需要引入iconfont.css****文件，同時(shí)還需要注意字體文件的擺放路徑)
第二步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：
<i class="iconfont icon-xxx"></i> 實(shí)際情況中"iconfont"（font-family）需要修改為你項(xiàng)目下的font-family诗鸭∪敬兀可以通過(guò)編輯項(xiàng)目查看，默認(rèn)是"iconfont"强岸。 iconfont.css源碼其實(shí)也是通過(guò)@font-face規(guī)則聲明字體锻弓，并引用字體文件，而字體編碼則是通過(guò)偽元素的方法添加進(jìn)html標(biāo)簽里面的蝌箍，所以對(duì)于瀏覽器支持情況需要ie8+（下圖為添加字體編碼css樣式）
這種使用方式需要注意的地方也都提過(guò)了青灼，有興趣的可以去親自體驗(yàn)一下。
最原始的的unicode使用方式的使用方法可參考上一個(gè)教程妓盲，教程鏈接：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950
現(xiàn)在來(lái)看一下全新的使用方式杂拨，symbol引用，其實(shí)這種方式使用起來(lái)也非常簡(jiǎn)單悯衬。打開(kāi)demo_symbol.html文件可以看到詳細(xì)的使用方法：
iconfont圖標(biāo)分別對(duì)應(yīng)不同的類(lèi)名：
symbol引用：
使用步驟如下：
第一步：引入項(xiàng)目下面生成的symbol代碼： <script src="./iconfont.js"></script>
(****首先需要引入iconfont.js****文件弹沽，此js****文件相當(dāng)于是svg****圖形集合文件的調(diào)用)
第二步：加入通用css代碼（引入一次就行） <style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
實(shí)際情況中"iconfont"（font-family）需要修改為你項(xiàng)目下的font-family筋粗〔唛伲可以通過(guò)編輯項(xiàng)目查看，默認(rèn)是"iconfont"娜亿。
使用多色圖標(biāo)引用效果：
關(guān)于iconfont圖標(biāo)的具體使用效果丽已，大家是要自行操作了才能深入了解，希望在這篇文章的幫助下暇唾，你能更加熟練的運(yùn)用iconfont的彩色圖標(biāo)促脉，希望大家能據(jù)需關(guān)注我們，我會(huì)為大家發(fā)布更多新教程和訊息策州。
