使用bootstrap或者element-ui等ui框架的時(shí)候唉窃，肯定感覺icon功能很爽耙饰，然而就是有些想要的圖標(biāo)，框架里面沒帶纹份，怎么辦苟跪。
有個(gè)很好的方法來擴(kuò)展廷痘，先打開一個(gè)阿里提供的圖標(biāo)網(wǎng)站庫(kù)：
http://www.iconfont.cn/
在這里面選擇自己想要的圖標(biāo)，加入購(gòu)物車（別怕件已，免費(fèi)的笋额。。）
——這里有個(gè)槽點(diǎn)篷扩，阿里這個(gè)是不支持全選的兄猩。。所以你只能一個(gè)圖標(biāo)一個(gè)圖標(biāo)的加入購(gòu)物車——所以本文后面也提供了一個(gè)方法教你如何批量加入
選好之后鉴未，你有兩種方法把這些圖標(biāo)應(yīng)用到你的項(xiàng)目里面去：
第一種枢冤，離線下載：
進(jìn)入購(gòu)物車，點(diǎn)擊【下載代碼】铜秆，就可以把圖標(biāo)以及demo下載到本地淹真，把如下幾個(gè)文件放到項(xiàng)目的某個(gè)目錄下
然后引入那個(gè)css文件
#你可以選擇link方式引入
<link rel="stylesheet" type="text/css" href="./iconfont.css">
或者import，都o(jì)k
@import "assets/public/font/iconfont.css";
然后就可以愉快的使用了：
<i class="iconfont icon-xxx"></i>
第二種羽峰，在線引用：
或者進(jìn)入購(gòu)物車趟咆，點(diǎn)擊【加入到項(xiàng)目】，然后就進(jìn)入到了我的項(xiàng)目梅屉，點(diǎn)擊生成代碼值纱，就生成了如下圖所示的一個(gè)css路徑，有三種引入方式坯汤，我選擇Font class的方式虐唠，如下圖所示，有一個(gè)css的路徑：
把這個(gè)引入到你的項(xiàng)目中惰聂，你就可以愉快的使用icon了疆偿，阿里不但提供給你素材，連cdn都給你包了搓幌，是不是很爽啊
#引入
<link rel="stylesheet">
#使用
<i class="iconfont icon-xxx"></i>
如果想了解其他兩種方式杆故，點(diǎn)擊那個(gè)頁面右上角的使用幫助，或者看下面這個(gè)鏈接溉愁，別百度了处铛，百度的很多都過時(shí)了，這玩意兒還得看官方文檔拐揭。
http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
好了撤蟆，彩蛋時(shí)間，如何批量：
剛才說了堂污，阿里不支持批量選擇啊家肯，作為一個(gè)coder，手點(diǎn)盟猖？不可能的讨衣。寧可寫1小時(shí)代碼實(shí)現(xiàn)自動(dòng)點(diǎn)也不可能花2分鐘手點(diǎn)；慌铩！反镇！
代碼如下圃泡，你只需要打開需要批量架構(gòu)的那個(gè)圖標(biāo)界面，然后再chrome的console里面執(zhí)行一下就ok了愿险，再執(zhí)行就是反選。
document.querySelectorAll('.icon-gouwuche1').forEach(function(o){
o.click()
})
