用vue、bootstrap等框架的时候，如何使用更多的icon图标

使用bootstrap或者element-ui等ui框架的时候，肯定感觉icon功能很爽，然而就是有些想要的图标，框架里面没带，怎么办。

有个很好的方法来扩展，先打开一个阿里提供的图标网站库：
http://www.iconfont.cn/

在这里面选择自己想要的图标，加入购物车（别怕，免费的。。）

image.png

——这里有个槽点，阿里这个是不支持全选的。。所以你只能一个图标一个图标的加入购物车——所以本文后面也提供了一个方法教你如何批量加入

选好之后，你有两种方法把这些图标应用到你的项目里面去：

第一种，离线下载：

进入购物车，点击【下载代码】，就可以把图标以及demo下载到本地，把如下几个文件放到项目的某个目录下

image.png

然后引入那个css文件

#你可以选择link方式引入


或者import，都ok
@import "assets/public/font/iconfont.css";

然后就可以愉快的使用了：

第二种，在线引用：

或者进入购物车，点击【加入到项目】，然后就进入到了我的项目，点击生成代码，就生成了如下图所示的一个css路径，有三种引入方式，我选择Font class的方式，如下图所示，有一个css的路径：

image.png

把这个引入到你的项目中，你就可以愉快的使用icon了，阿里不但提供给你素材，连cdn都给你包了，是不是很爽啊

#引入


#使用

如果想了解其他两种方式，点击那个页面右上角的使用帮助，或者看下面这个链接，别百度了，百度的很多都过时了，这玩意儿还得看官方文档。
http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

好了，彩蛋时间，如何批量：

刚才说了，阿里不支持批量选择啊，作为一个coder，手点？不可能的。宁可写1小时代码实现自动点也不可能花2分钟手点！！！
代码如下，你只需要打开需要批量架构的那个图标界面，然后再chrome的console里面执行一下就ok了，再执行就是反选。

document.querySelectorAll('.icon-gouwuche1').forEach(function(o){
  o.click()
})