在vue框架下element-ui两种引用阿里云图标库的方法

方法一下载资源到本地

1.搜索想要的图标并添加入库

2.添加入项目

3. 

下载解压放入src的文件中， 要在main.js文件中声明引入压缩包中的iconfont.css文件 

注意文件路径

4.引入文件后打开压缩包中的demo_index.html这是官方教程文件

 可以看到第一步是引入css文件，我们在main.js文件中已经引用

第二步是给一个通用的iconfont类名和一个特有的类名和自己的设置有关

5.调用

 就是红框里面的类名

例如   ：

<el-input prefix-icon="iconfont icon-lock_fill"></el-input>

只要是element-ui官方文档说明的icon可调，都可以更换图标只要把原属性更换就可以

第二种方法：

用在线链接处理

打开此链接。注意是font class下的css文件

2.打开链接后复制代码，在刚才放src/accent文件夹下创建css文件放入复制的代码然后在main.js文件中声明

import "@/assets/iconfont.css";

 然后用和方法一同样的方法调用

总结：第一种方法是下载到本地或者自己的服务器稳一点，但是如果要更新要再次下载，重新引入。

第二种方法是使用在线连接，更新只要在阿里云更新一下代码再次拉入css文件就可以。