[vue]Vue Element使用第三方icon图标教程详解

Vue Element使用第三方icon图标——阿里icon

1.打开阿里icon，注册 >登录>图标管理>我的项目>新建项目

2.新建项目

项目名称随便写。前缀注意，不要跟element-ui自带的icon(前缀为：el-icon)重名了。

3.新建好项目后去首页找需要的图标

在购物车当中选择添加至项目

4.下载至本地

选择 Font class 下载至本地

5.修改iconfont.css

解压后你会得到这些文件，打开iconfont.css

将以下代码加进去，注意： el-icon-third 是你之前设置的icon前缀，第二个 el-icon-third前边有空格的

[class^="el-icon-third"], 
[class*=" el-icon-third"]/*这里有空格*/
{ font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
}

6.在项目当中引入css文件

在src下的assets下新建一个icon文件夹，将下载的所有文件都复制粘贴

在main.js当中引入

import './assets/icon/iconfont.css'

然后重新 npm run dev 一下

7.使用

复制代码可获得一个class类名

8.效果