使用bootstrap或者element-ui等ui框架的時候，肯定感覺icon功能很爽，然而就是有些想要的圖標，框架里面沒帶，怎么辦。
有個很好的方法來擴展，先打開一個阿里提供的圖標網站庫：
http://www.iconfont.cn/
在這里面選擇自己想要的圖標，加入購物車（別怕，免費的。。）
image.png
——這里有個槽點，阿里這個是不支持全選的。。所以你只能一個圖標一個圖標的加入購物車——所以本文后面也提供了一個方法教你如何批量加入
選好之后，你有兩種方法把這些圖標應用到你的項目里面去：
第一種，離線下載：
進入購物車，點擊【下載代碼】，就可以把圖標以及demo下載到本地，把如下幾個文件放到項目的某個目錄下
image.png
然后引入那個css文件
#你可以選擇link方式引入
<link rel="stylesheet" type="text/css" href="./iconfont.css">
或者import，都ok
@import "assets/public/font/iconfont.css";
然后就可以愉快的使用了：
<i class="iconfont icon-xxx"></i>
第二種，在線引用：
或者進入購物車，點擊【加入到項目】，然后就進入到了我的項目，點擊生成代碼，就生成了如下圖所示的一個css路徑，有三種引入方式，我選擇Font class的方式，如下圖所示，有一個css的路徑：
image.png
把這個引入到你的項目中，你就可以愉快的使用icon了，阿里不但提供給你素材，連cdn都給你包了，是不是很爽啊
#引入
<link rel="stylesheet">
#使用
<i class="iconfont icon-xxx"></i>
如果想了解其他兩種方式，點擊那個頁面右上角的使用幫助，或者看下面這個鏈接，別百度了，百度的很多都過時了，這玩意兒還得看官方文檔。
http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
好了，彩蛋時間，如何批量：
剛才說了，阿里不支持批量選擇啊，作為一個coder，手點？不可能的。寧可寫1小時代碼實現自動點也不可能花2分鐘手點?。。?/strong>
代碼如下，你只需要打開需要批量架構的那個圖標界面，然后再chrome的console里面執行一下就ok了，再執行就是反選。
document.querySelectorAll('.icon-gouwuche1').forEach(function(o){
o.click()
})
