vant字体图标下怎么添加文字_Vant UI中使用iconfont实现自定义图标

痛点

Vant中的icon很少，只是提供了一些常用的图标，但是在实际项目中UI设计有自己的一套风格图标，那么就需要在Vant中自定义图标，官方是提供了怎么自定义图标说明的。

https://youzan.github.io/vant/#/zh-CN/icon

开始

1. 上传图标

我的项目都是叫UI设计把图标上传到https://www.iconfont.cn/，然后把项目分享给我。

image.png

这里最好把项目的前缀统一设置一下，方便后续的操作，因为后面会用到这个前缀。这里我修改成my-icon-前缀。

image.png

image.png

2. 下载到本地

把项目下载到本地，然后把iconfont.css和iconfont.ttf复制到项目的assets/css文件夹中。

image.png

image.png

3.修改iconfont.css文件

image.png

@font-face {

font-family: 'my-icon';

src: url('./ic