問題的導火索
官方自定義圖標直通車: https://youzan.github.io/vant/#/zh-CN/icon
因為Vant中的icon很少,只有一些基礎常用的圖標,但是在實際項目中UI設計會根據自己的項目設計一套風格圖標,那么就需要在Vant中自定義圖標,官方是提供了怎么自定義圖標說明的。
問題的鋪墊
阿里 iconfont 直通車:https://www.iconfont.cn/
1、新建iconfont項目
將設計好的UI 圖標上傳至這個項目中
PS:提醒 這里最好把項目的前綴統一設置一下,方便后續的操作,后面的文件會用到這個前綴。
2.將項目下的壓縮包下載到本地、然后把iconfont.css和iconfont.ttf復制到項目的assets/css文件夾中
3、編輯iconfont.css文件中標紅位置、將你項目名替換、並在main.js中引進iconfont.css文件
4、頁面使用、可以參考官方文檔設置圖標顏色、大小等
<van-icon class-prefix="my-icon" name="dian" size="36px" color="#00CC14" style="padding: 5px" />
效果圖
PS:這樣就可以愉快的使用了!!!