VUE+element-ui项目,使用中用到大量图标,而element-ui本身的图标库数量太少,并不能满足使用!
引用阿里巴巴矢量图标库:
1、登陆https://www.iconfont.cn/(没有账号需注册)
2、创建项目
3 、创建项目后去图标库添加图标,用哪个添加哪个到购物车
4、添加完后点击右上角购物车,添加至你的项目
5、下载到本地
6、解压后,在你的项目assets下新建icon文件夹,放入除了demo.css和demo_index.html之外的文件
7、在main.js文件 //引入图标 import "./assets/icon/iconfont.css";
注意:在图标库创建项目时需要添加icon前缀
添加前缀后, iconfont.css需要加css
.iconfont { //这是原有css
font-family: "iconfont" !important;
font-size: 18px;
margin-right: 5px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
//这是新添加
[class^="前缀"], [class*=" 前缀"] //这里一定要有空格
{
font-family: "iconfont" !important;
font-size: 18px;
margin-right: 5px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
至此,就可以愉快的使用各种图标了!