vue element-ui 引入Iconfont阿里巴巴图标库

1.引入链接方式引入图标

1.在阿里巴巴矢量图新建项目

图片.png 图片.png

2.找自己喜欢的项目，加入购物车，再加入项目

图片.png

3.点击Font class 下面的生成代码，复制代码

图片.png

4.新建iconfont.css文件。el-icon-cus与上文新建项目FontClass保持一致

[class^="el-icon-cus"], [class*="el-icon-cus"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

5.在main.js里面引入

import iconfont from './assets/iconfont.css';

6.使用，跟element 里面i使用一样。可单独使用，也可引用到组件中。

2.下载引入

1.下载资源

图片.png

解压后去掉demo,

图片.png

在assets目录下新建iconfont文件夹，拷贝解压的文件到该目录下
并在main.js中引入图标文件

import iconfont from './assets/iconfont/iconfont.css';

更新图标

引入链接的，重新生成链接，更新链接。
本地下载导入的，重新下载导入