在使用Vant UI做h5页面时,不可避免的会使用到各种小图标,但是Vant 官方提供的图标是有限的,考虑到这种情况,vant也提供了一种方法去自定义图标,自定义图标。可能有些同学看到这里也是一头雾水,下面有详细的教程
iconfont
让我们的UI设计小姐姐将图标上传到iconfont
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210621201350806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbmZlbmdfaHU=,size_16,color_FFFFFF,t_70)
注意,我们尽量让UI小姐姐将图标的前缀统一,点击右上角的 “项目设置”
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210621201411435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbmZlbmdfaHU=,size_16,color_FFFFFF,t_70)
下载项目
将项目下载到本地,将文件 iconfont.css 和iconfont.ttf文件放入项目文件夹/assets/icon_font
配置 main.js
在main.js 中引入iconfont.css
import './assets/icon_font/iconfont.css';
使用
<!-- 通过 class-prefix 指定类名为 icon -->
<van-icon class-prefix="icon" name="icon_function_chuku" color="#000000" size="35" />
<van-icon class-prefix="icon" name="chukuguanli" color="#000000" size="35" />
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210621201428706.png)