vant使用iconfont图标

1、登录官网

登录https://www.iconfont.cn/，这是一个很好用的图标库。

2、选择自己需要的图标，添加到购物车

3、进入购物车，添加图标至项目

4、修改class名称和前缀

 

5、下载代码

 

 

6、存放到assets/iconfont中

下载下来是个压缩包，解压。主要是这些文件。为了方便管理，比如存放到assets/iconfont中，其中demo的那两个文件可以不放进去。打开demo_index，可以查看信息。

7、引用

在main.js中引入

import ‘@/assets/iconfont/iconfont.css’

8、使用

<span class="iconfont van-icon-xxx"></span> 比如<span class="iconfont van-icon-excel"></span>

注意 ：

在第4步配置 Font Family为 iconfont 这里不能省略。

在第4步配置前缀 为 van-icon-

 

或者

<van-icon class="iconfont" class-prefix='van-icon' name='excel' color="green"></van-icon>