痛点
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('./iconfont.ttf') format('truetype');
}
.my-icon {
font-family: 'my-icon';
}
这里的font-family就用到前面修改的前缀名称。
4.修改main.js文件
image.png
import "./assets/css/iconfont.css";
5.页面中使用
<van-icon class-prefix="my-icon" name="liebiao" />
image.png
6.其他
可以看到在van-icon中是添加了class-prefix="my-icon"这个属性的，如果是想把这个去掉，只写name属性，可以把前面说到的前缀名称修改为 vant-icon-，然后iconfont.css中做相应的修改就可以了。
2019-05-24 补充
上图的图标是斜的，改如何解决？
方式一（推荐）
给my-icon加上相应的样式
image.png
.my-icon {
font-family: 'my-icon';
position: relative;
font: 0.37333rem/1 "my-icon";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
方式二
直接把iconfont.css文件中的my-icon全部换成van-icon。
不推荐这样做，引文这样不容易区分框架图标和自己自定义的图标，并且还有可能由于名字重复覆盖框架图标。
