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