痛點
Vant中的icon很少，只是提供了一些常用的圖標，但是在實際項目中UI設計有自己的一套風格圖標妨蛹，那么就需要在Vant中自定義圖標，官方是提供了怎么自定義圖標說明的晴竞。
https://youzan.github.io/vant/#/zh-CN/icon
開始
1. 上傳圖標
我的項目都是叫UI設計把圖標上傳到https://www.iconfont.cn/蛙卤，然后把項目分享給我。
image.png
這里最好把項目的前綴統一設置一下，方便后續(xù)的操作颤难，因為后面會用到這個前綴神年。這里我修改成
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逆济。
不推薦這樣做，引文這樣不容易區(qū)分框架圖標和自己自定義的圖標磺箕，并且還有可能由于名字重復覆蓋框架圖標奖慌。
