想必關注iconfont的同學都知道，iconfont最近做出了一次重大升級，升級成為iconfont+了，而這次更新，iconfont+居然開始支持彩色圖標，這意味着我們能夠使用更具有特色更形象的全新圖標。之前我們也發表過一篇關於iconfont圖標字體的相關教程，以文字的方式，實現網頁中的圖標和特殊字符。教程鏈接可參考：點這里接下來我們來詳細了解一下全新的功能吧。
symbol引用: 這是一種全新的使用方式，應該說這才是未來的主流，也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點： 支持多色圖標了，不再受單色限制。 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。 兼容性較差，支持 ie9+,及現代瀏覽器。 瀏覽器渲染svg的性能一般，還不如png。 這種全新的使用方式，據官網介紹說是做了一個svg的集合，SVG（Scalable Vector Graphics）可縮放矢量圖形，SVG具有什么特點呢? SVG特點：
1．任意放縮。（用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。）
2．文本獨立。（SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。）
3．較小文件。（總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。）
4．超強顯示效果。（SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。）
5．超級顏色控制。（SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。） 由於svg的格式優點是基於xml可擴展標記語言，是一個XML文件，而且SVG是被設計用於互聯網，所以通過Javascript和DOM訪問它就是最重要的應用模式。通過Javascript和DOM可以動態地修改HTML，同樣也可以在瀏覽器中動態地創建、修改和刪除圖片。 因此在網頁中使用svg與其他圖像格式相比（比如 JPEG 和 GIF）的優勢在於: SVG 圖像可通過文本編輯器來創建和修改 SVG 圖像可被搜索、索引、腳本化或壓縮 SVG 是可伸縮的 SVG 圖像可在任何的分辨率下被高質量地打印 SVG 可在圖像質量不下降的情況下被放大 而瀏覽器的支持情況，iconfont官網也有說明： Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。 iconfont官網描述瀏覽器渲染svg的性能一般，還不如png，實測了一下做了幾個彩色小icon，現代瀏覽器對svg渲染其實也相當不錯了。而且iconfont平台也是推薦這種全新的使用方式，現在互聯網技術迅猛發展，相信不久的將來這種使用方式會是未來的主流。 介紹了那么多，那么來做個小案例體驗一下。 首先還是到iconfont官網，這次找幾個彩色的圖標：
找到對應的圖標保存到項目后，去圖標管理—我的項目里面，找到新添加的項目並下載到本地，下載下來解壓后我們可以看到這些文件：
iconfont+除了全新的使用方式，傳統的使用方式也進行了一些優化，詳細可以參考demo文件： 首先第一個demo文件打開是font-class引用 font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。 與unicode使用方式相比，具有如下特點： 兼容性良好，支持ie8+，及所有現代瀏覽器。 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。 因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。 使用步驟如下： （注意:為了瀏覽器更好的渲染，如果只使用單色圖標，建議不要選擇下載多色圖標替代）
第一步：引入項目下面生成的fontclass代碼：
(這種方式是需要引入iconfont.css文件，同時還需要注意字體文件的擺放路徑) 第二步：挑選相應圖標並獲取類名，應用於頁面：實際情況中"iconfont"（font-family）需要修改為你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。 iconfont.css源碼其實也是通過@font-face規則聲明字體，並引用字體文件，而字體編碼則是通過偽元素的方法添加進html標簽里面的，所以對於瀏覽器支持情況需要ie8+（下圖為添加字體編碼css樣式）  這種使用方式需要注意的地方也都提過了，有興趣的可以去親自體驗一下。 最原始的的unicode使用方式的使用方法可參考上一個教程，教程鏈接：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950 現在來看一下全新的使用方式，symbol引用，其實這種方式使用起來也非常簡單。打開demo_symbol.html文件可以看到詳細的使用方法： iconfont圖標分別對應不同的類名：
symbol引用： 使用步驟如下： 第一步：引入項目下面生成的symbol代碼：
(首先需要引入iconfont.js文件，此js文件相當於是svg圖形集合文件的調用) 第二步：加入通用css代碼（引入一次就行）
第三步：挑選相應圖標並獲取類名，應用於頁面：實際情況中"iconfont"（font-family）需要修改為你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。 使用多色圖標引用效果：
