首先打開Iconfont-阿里巴巴矢量圖標(biāo)庫
網(wǎng)址 http://www.iconfont.cn/
搜索你想要的圖標(biāo)之后，并加入購物車
打開右上角購物車姐帚，查看你下載的圖標(biāo)，并點(diǎn)擊右下角的下載代碼
查看保存在本地的文件
一共有三種引用方式
1救恨、unicode引用
特點(diǎn)：
?1漱逸、兼容性最好，支持IE6及所有現(xiàn)代的瀏覽器凸椿。
?2削祈、支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小和顏色等。
?3脑漫、不支持多色髓抑，只能使用單色圖標(biāo)。即便是項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色优幸。
使用步驟
第一步：拷貝項(xiàng)目下面生成的font-face
第二步：定義使用iconfont的樣式
第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼吨拍，應(yīng)用于頁面
<i class="iconfont">3</i>
注："iconfont"是你項(xiàng)目下的font-family⊥耍可以通過編輯項(xiàng)目查看羹饰，默認(rèn)是"iconfont"。
2碳却、font-class引用
font-class是unicode使用方式的一種變種队秩，主要是解決unicode書寫不直觀，語意不明確的問題追城。
特點(diǎn)：
1刹碾、兼容性良好，支持IE8+座柱，及所有現(xiàn)代的瀏覽器迷帜。
2物舒、不支持多色，只能使用單色圖標(biāo)戏锹。即便是項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色冠胯。
3、相比于unicode語意明確锦针，書寫更直觀荠察。可以很容易分辨這個(gè)icon是什么奈搜。
4悉盆、因?yàn)槭褂胏lass來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)馋吗，只需要修改class里面的unicode引用焕盟。
使用步驟
第一步：引入項(xiàng)目下面生成的fontclass代碼：
第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<i class="iconfont icon-xxx"></i>
"iconfont"是你項(xiàng)目下的font-family宏粤〗徘蹋可以通過編輯項(xiàng)目查看，默認(rèn)是"iconfont"绍哎。
3来农、symbol引用
這是一種全新的使用方式，應(yīng)該說這才是未來的主流崇堰，也是平臺(tái)目前推薦的用法沃于。
特點(diǎn)：
1、支持多色圖標(biāo)海诲，不再受單色限制揽涮。
2、通過一些技巧饿肺，支持像字體那樣，通過font-size,color來調(diào)整樣式盾似。
3敬辣、兼容性較差，支持IE9+零院，及現(xiàn)代瀏覽器溉跃。
4、瀏覽器渲染svg的性能一般告抄，還不如png撰茎。
使用步驟
第一步：引入項(xiàng)目下面生成的symbol代碼：
<script src=''./iconfont.js''></script>
第二步：加入通用css代碼（引入一次就行）：
.icon { ?width:1em; height:1em; ?vertical-align:-0.15em; ?fill: currentColor; ?overflow: hidden;}
第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<svg class=''icon'' aria-hidden="true">
? <use xlink:href="#icon-xxx"></use>
</svg>
以上就是所有的步驟打洼。當(dāng)然iconfont也支持在線引用龄糊，后續(xù)再更新逆粹。
