【前端】vue + elementUI使用第三方图标库方法

文章转载自 ： vue+element-ui项目内使用阿里图标库

1. 添加图标

1. 首先,找到阿里图标库网址： iconfont

2. 进入到我的项目
   

3. 新建项目 ：
   

4. 新建项目后往购物车内添加图标，将你需要的添加完成后，打开购物车将其添加到项目，选中项目，确认即可。
   

5. 就可以看你添加的2个图标，然后点击 下载到本地：

2. 使用图标

1. 下载文件里面文件很多，但是主要用到的就这几个文件，其他的删了就行，留下几个新建fonts文件夹，将这几个文件添加进fonts文件夹。
   

2.1 添加fonts

1. 打开vue项目，将其添加到 src目录下的 assets 文件夹下：

2.2 导入fonts 中的iconfonts.css到main.js

import './assets/fonts/iconfont.css'

2.3 在页面中使用即可

1. 导入完成后，进行在你需要图标的位置进行使用：

<i class="iconfont icon-user"></i>

2.4 善于使用其中包含的demo

1. 在下载的文件中有一个demo_index.html文件可以方便在其中查找对应图标的类名。