使用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 href="//at.alicdn.com/t/font_591689_bxvxaxdr7u9v0a4i.css" rel="stylesheet">
#使用
<i class="iconfont icon-xxx"></i>
如果想了解其他两种方式，点击那个页面右上角的使用帮助，或者看下面这个链接，别百度了，百度的很多都过时了，这玩意儿还得看官方文档。
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()
})
网友评论