VUE项目中引入第三方字体图标库

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;
}

 

 至此，就可以愉快的使用各种图标了!