首先打開Iconfont-阿里巴巴矢量圖標庫
網(wǎng)址 http://www.iconfont.cn/
搜索你想要的圖標之后，并加入購物車
打開右上角購物車，查看你下載的圖標，并點擊右下角的下載代碼
查看保存在本地的文件
一共有三種引用方式
1、unicode引用
特點：
?1、兼容性最好，支持IE6及所有現(xiàn)代的瀏覽器。
?2、支持按字體的方式去動態(tài)調(diào)整圖標大小和顏色等。
?3、不支持多色，只能使用單色圖標。即便是項目里有多色圖標也會自動去色。
使用步驟
第一步：拷貝項目下面生成的font-face
第二步：定義使用iconfont的樣式
第三步：挑選相應圖標并獲取字體編碼，應用于頁面
<i class="iconfont">3</i>
注："iconfont"是你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。
2、font-class引用
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
特點：
1、兼容性良好，支持IE8+，及所有現(xiàn)代的瀏覽器。
2、不支持多色，只能使用單色圖標。即便是項目里有多色圖標也會自動去色。
3、相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
4、因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
使用步驟
第一步：引入項目下面生成的fontclass代碼：
第二步：挑選相應圖標并獲取類名，應用于頁面：
<i class="iconfont icon-xxx"></i>
"iconfont"是你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。
3、symbol引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。
特點：
1、支持多色圖標，不再受單色限制。
2、通過一些技巧，支持像字體那樣，通過font-size,color來調(diào)整樣式。
3、兼容性較差，支持IE9+，及現(xiàn)代瀏覽器。
4、瀏覽器渲染svg的性能一般，還不如png。
使用步驟
第一步：引入項目下面生成的symbol代碼：
<script src=''./iconfont.js''></script>
第二步：加入通用css代碼（引入一次就行）：
.icon { ?width:1em; height:1em; ?vertical-align:-0.15em; ?fill: currentColor; ?overflow: hidden;}
第三步：挑選相應圖標并獲取類名，應用于頁面：
<svg class=''icon'' aria-hidden="true">
? <use xlink:href="#icon-xxx"></use>
</svg>
以上就是所有的步驟。當然iconfont也支持在線引用，后續(xù)再更新。
