想必關(guān)注iconfont的同學(xué)都知道官脓，iconfont最近做出了一次重大升級协怒，升級成為iconfont+了，而這次更新卑笨，iconfont+居然開始支持彩色圖標(biāo)孕暇，這意味著我們能夠使用更具有特色更形象的全新圖標(biāo)。之前我們也發(fā)表過一篇關(guān)于iconfont圖標(biāo)字體的相關(guān)教程湾趾，以文字的方式锈嫩，實(shí)現(xiàn)網(wǎng)頁中的圖標(biāo)和特殊字符逾滥。教程鏈接可參考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950接下來我們來詳細(xì)了解一下全新的功能吧。
symbol引用:
這是一種全新的使用方式，應(yīng)該說這才是未來的主流笛臣，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章這種用法其實(shí)是做了一個(gè)svg的集合棘钞，與另外兩種相比具有如下特點(diǎn)：
支持多色圖標(biāo)了缭付，不再受單色限制。 通過一些技巧歧譬，支持像字體那樣岸浑，通過font-size,color來調(diào)整樣式。 兼容性較差瑰步，支持ie9+,及現(xiàn)代瀏覽器矢洲。 瀏覽器渲染svg的性能一般，還不如png缩焦。
這種全新的使用方式读虏，據(jù)官網(wǎng)介紹說是做了一個(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)即使沒有安裝某一字體，也會(huì)看到和他們制作時(shí)完全相同的畫面袜炕。） 3．較小文件本谜。（總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多偎窘，因而下載也很快乌助。） 4．超強(qiáng)顯示效果。（SVG圖像在屏幕上總是邊緣清晰陌知，它的清晰度適合任何屏幕分辨率和打印分辨率他托。） 5．超級顏色控制。（SVG圖像提供一個(gè)1 600萬種顏色的調(diào)色板仆葡，支持ICC顏色描述文件標(biāo)準(zhǔn)赏参、RGB、線X填充沿盅、漸變和蒙版把篓。）
由于svg的格式優(yōu)點(diǎn)是基于xml可擴(kuò)展標(biāo)記語言，是一個(gè)XML文件腰涧，而且SVG是被設(shè)計(jì)用于互聯(lián)網(wǎng)韧掩，所以通過Javascript和DOM訪問它就是最重要的應(yīng)用模式。通過Javascript和DOM可以動(dòng)態(tài)地修改HTML窖铡，同樣也可以在瀏覽器中動(dòng)態(tài)地創(chuàng)建疗锐、修改和刪除圖片。
因此在網(wǎng)頁中使用svg與其他圖像格式相比（比如JPEG 和GIF）的優(yōu)勢在于:
SVG 圖像可通過文本編輯器來創(chuàng)建和修改 SVG圖像可被搜索费彼、索引滑臊、腳本化或壓縮 SVG是可伸縮的 SVG圖像可在任何的分辨率下被高質(zhì)量地打印 SVG可在圖像質(zhì)量不下降的情況下被放大
而瀏覽器的支持情況，iconfont官網(wǎng)也有說明： Internet Explorer 9箍铲、Firefox雇卷、Opera、Chrome 以及Safari 支持內(nèi)聯(lián)SVG颠猴。Internet Explorer 8或更早版本聋庵，可通過安裝Adobe SVG Viewer以支持SVG。
iconfont官網(wǎng)描述瀏覽器渲染svg的性能一般芙粱，還不如png，實(shí)測了一下做了幾個(gè)彩色小icon氧映，現(xiàn)代瀏覽器對svg渲染其實(shí)也相當(dāng)不錯(cuò)了春畔。而且iconfont平臺(tái)也是推薦這種全新的使用方式，現(xiàn)在互聯(lián)網(wǎng)技術(shù)迅猛發(fā)展，相信不久的將來這種使用方式會(huì)是未來的主流律姨。
介紹了那么多振峻，那么來做個(gè)小案例體驗(yàn)一下。
首先還是到iconfont官網(wǎng)择份，這次找?guī)讉€(gè)彩色的圖標(biāo)：
網(wǎng)頁導(dǎo)航欄多色圖標(biāo)庫扣孟，點(diǎn)進(jìn)去會(huì)發(fā)現(xiàn)很多多色圖標(biāo)庫的集合：
找到對應(yīng)的圖標(biāo)保存到項(xiàng)目后，去圖標(biāo)管理—我的項(xiàng)目里面荣赶，找到新添加的項(xiàng)目并下載到本地凤价，下載下來解壓后我們可以看到這些文件：
iconfont+除了全新的使用方式，傳統(tǒng)的使用方式也進(jìn)行了一些優(yōu)化拔创，詳細(xì)可以參考demo文件：
首先第一個(gè)demo文件打開是font-class引用
font-class是unicode使用方式的一種變種利诺，主要是解決unicode書寫不直觀，語意不明確的問題剩燥。
與unicode使用方式相比慢逾，具有如下特點(diǎn)：
兼容性良好，支持ie8+灭红，及所有現(xiàn)代瀏覽器侣滩。 相比于unicode語意明確，書寫更直觀变擒【椋可以很容易分辨這個(gè)icon是什么。 因?yàn)槭褂胏lass來定義圖標(biāo)赁项，所以當(dāng)要替換圖標(biāo)時(shí)葛躏，只需要修改class里面的unicode引用。 不過因?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)并獲取類名，應(yīng)用于頁面：
<i class="iconfont icon-xxx"></i> 實(shí)際情況中"iconfont"（font-family）需要修改為你項(xiàng)目下的font-family芬骄』福可以通過編輯項(xiàng)目查看，默認(rèn)是"iconfont"账阻。 iconfont.css源碼其實(shí)也是通過@font-face規(guī)則聲明字體蒂秘，并引用字體文件，而字體編碼則是通過偽元素的方法添加進(jìn)html標(biāo)簽里面的淘太，所以對于瀏覽器支持情況需要ie8+（下圖為添加字體編碼css樣式）
這種使用方式需要注意的地方也都提過了姻僧，有興趣的可以去親自體驗(yàn)一下规丽。
最原始的的unicode使用方式的使用方法可參考上一個(gè)教程，教程鏈接：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950
現(xiàn)在來看一下全新的使用方式撇贺，symbol引用赌莺，其實(shí)這種方式使用起來也非常簡單。打開demo_symbol.html文件可以看到詳細(xì)的使用方法：
iconfont圖標(biāo)分別對應(yīng)不同的類名：
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)并獲取類名艘狭，應(yīng)用于頁面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
實(shí)際情況中"iconfont"（font-family）需要修改為你項(xiàng)目下的font-family〈涠可以通過編輯項(xiàng)目查看巢音，默認(rèn)是"iconfont"。
使用多色圖標(biāo)引用效果：
可以看出瀏覽器渲染還是非常不錯(cuò)蕴轨，關(guān)于iconfont的其他更多操作港谊，還需要大家繼續(xù)探索，并結(jié)合實(shí)際完成操作橙弱。
