Vant UI中结合阿里iconfont实现自定义图标解决图标不足


问题的导火索

    官方自定义图标直通车:  https://youzan.github.io/vant/#/zh-CN/icon

    因为Vant中的icon很少,只有一些基础常用的图标,但是在实际项目中UI设计会根据自己的项目设计一套风格图标,那么就需要在Vant中自定义图标,官方是提供了怎么自定义图标说明的。

 

问题的铺垫

       阿里 iconfont 直通车:https://www.iconfont.cn/

  1、新建iconfont项目

       将设计好的UI 图标上传至这个项目中

 

 PS:提醒 这里最好把项目的前缀统一设置一下,方便后续的操作,后面的文件会用到这个前缀。

 

 

 

 

 

2.将项目下的压缩包下载到本地、然后把iconfont.cssiconfont.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:这样就可以愉快的使用了!!!

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM