Vant自帶的圖標比較少，有時候不能滿足使用。
普通使用第三方圖標
關于Vant怎么使用第三方圖標，網(wǎng)上有文章，以使用iconfont為例，有幾種方法，說其中一種：
- 首先下載圖標到本地：
image.png
- 下載完成后放在項目中，如放在
src/assets下，像demo.html、demo.css等示范文件可選擇性刪除。 - 在
main.js中添加上述樣式的引入代碼：
import "@/assets/font/iconfont.css";
- 最后使用
<van-icon>即可，如（重點是有class="iconfont" class-prefix="icon"這部分）：
<van-icon class="iconfont" class-prefix="icon" name="mobilephone"></van-icon>
在Vant的組件中使用
以Field為例，F(xiàn)ield支持圖標的，如下面代碼：
<van-field
v-model="form.userId"
name="手機號"
left-icon="smile-o"
right-icon="warning-o"
placeholder="請輸入手機號碼"
:rules="[{ required: true, message: '請輸入手機號碼' }]"
/>
效果如圖：
image.png
那我想換成自定義圖標，像這樣寫法看行不行（添加class="iconfont" class-prefix="icon"這部分）：
<van-field
v-model="form.userId"
name="手機號"
class="iconfont" class-prefix="icon"
left-icon="mobilephone"
right-icon="warning-o"
placeholder="請輸入手機號碼"
:rules="[{ required: true, message: '請輸入手機號碼' }]"
/>
會發(fā)現(xiàn)不行，改成這樣：
<van-field
v-model="form.userId"
name="手機號"
left-icon="mobilephone"
right-icon="mobilephone"
placeholder="請輸入手機號碼"
:rules="[{ required: true, message: '請輸入手機號碼' }]"
>
<van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="mobilephone"></van-icon>
<van-icon class="iconfont" class-prefix="icon" slot="right-icon" name="mobilephone"></van-icon>
</van-field>
可以！看效果
image.png
