问题的导火索
官方自定义图标直通车: 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:这样就可以愉快的使用了!!!