uni-app/vue 引入自定义图标库——Iconfont-阿里巴巴

---

前言

uni-app官方提供的图标库很少，今天来介绍一下如何引入自定义图标库，介绍如何使用阿里巴巴矢量图标库。

---

[iconfont 官网](https://www.iconfont.cn/)

1.首先在官网登录注册，选择你需要的图标加入购物车，可以多选

操作如下（示例）：

2.新建项目，把购物车中的图标添加到项目，然后点击下载至本地

操作如下（示例）：

3.解压后的文件如图所示，复制iconfont.css文件，粘贴到我们项目的static（或common）目录下，重命名为iconfont.scss(或者直接可以copy过来)

操作如下（示例）：

4.打开我们复制过来的css文件，把里面引用了但是我们没有复制过来的文件的那几行删除掉（留下data那一行，保留最后url的‘ ; ’号），我们一般不需要用到。

操作如下（示例）：

5.在App.vue文件的style中引入

/* iconfont.scss - 自定义图标库 */
	@import './static/scss/iconfont.scss';

6.在页面中使用

6.1.使用方法 class=“qt-add iconfont” （必须要有这两个类名）

找到之前解压的文件，里面有一个demo的html文件，在浏览器中打开，选择font-class

运行即可显示。