VUE如何引入阿里单色图标？

1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压

2、在项目src目录新建目录font，用于存放刚才下载解压的代码

3、在main.js导入iconfont.css文件

import './font/iconfont/iconfont.css'

4、在代码中使用class="iconfont icon-XXX"就可以使用图标了

这是直接引用，而像Element-UI则是将其与自己的图标进行了融合。

Element-UI引入第三方图标库：

在iconfont官网选图标，加入购物车，加入项目 编辑项目，修改FontClass/Symbol 前缀为：el-icon-xx （xx为自己定义的类名，注意不要与Element自身的图标类名重合） 将图标项目下载至本地，解压 在项目src目录新建目录font，用于存放刚才下载解压的代码 打开iconfont.css文件，将以下代码加进去：

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

在main.js导入iconfont.css文件 import './font/iconfont/iconfont.css' 打开在阿里icon的项目，复制你想要的图标代码 使用方式与Element-UI自带的图标一样