vue引用阿里云iconfont使用icon图标（elementUI图标太少）

进入Iconfont(https://www.iconfont.cn/)找到自己的项目->更多操作->编辑项目修改前缀，之后用的时候就可以icon-al-xxxxx(可以修改自己习惯和喜欢的样式)将icon文件下载到本地将下载下来的文件解压后，找到目录下的iconfont.css文件，然后做如下修改在vue的Main.js 里面引入iconfont，在elementUI的css之前引入

最凶残的小海豹

2513人浏览 · 2020-10-13 10:09:59

最凶残的小海豹 · 2020-10-13 10:09:59 发布

方法一（推荐）

1. 进入Iconfont(https://www.iconfont.cn/)
2. 找到自己的项目->更多操作->编辑项目
在这里插入图片描述

3. 修改前缀，之后用的时候就可以icon-al-xxxxx(可以修改自己习惯和喜欢的样式)
在这里插入图片描述
4. 点击Font class，点击查看在线链接，复制下面代码

在这里插入图片描述
5. 进入vue根目录的Public/index.html，打开文件，将下列代码添加进去

<link rel="stylesheet" type="text/css" href="刚才复制的代码">

6. 之后就可以复制代码，然后像使用elementUI里面一样使用啦。（例如：icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”），如果没有显示，重启一下项目 npm run serve 。
在这里插入图片描述

方法二

1. 进入Iconfont(https://www.iconfont.cn/)
2. 找到自己的项目->更多操作->编辑项目
在这里插入图片描述

3. 修改前缀，之后用的时候就可以icon-al-xxxxx(可以修改自己习惯和喜欢的样式)
在这里插入图片描述
4. 将icon文件下载到本地

5. 将下载下来的文件解压后，找到目录下的iconfont.css文件，然后做如下修改

6. 将下列iconfoot文件拷贝到项目里面就可以了

8. 在vue的Main.js 里面引入iconfont，在elementUI的css之前引入，我放到之后引入，elementUI的icon就不显示了
在这里插入图片描述
9. 之后就可以复制代码，然后像使用elementUI里面一样使用啦。（例如：icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”），如果没有显示，重启一下项目 npm run serve 。

参考：https://www.jianshu.com/p/a6b54662753b