iview自定義圖標,render方式自定義圖標


案例一:import方式

參考原文地址:https://blog.csdn.net/weixin_41538490/article/details/89436883

 

案例二:HTML引入方式

1.首先在阿里媽媽圖標庫把想要的圖標加入購物車,這里以二維碼圖標為例,可以加入多個圖標。

 

 

2.然后點擊左上角購物車按鈕打開購物車下載代碼

 

 

3.將下載后的文件打開,並且將以下文件復制到iview項目中,推薦放到iview文件夾下,這里我新建了一個icons的文件夾

 

 

 

 

 4.然后就到了使用圖標的環節

①首先在html中引入圖標文件

 

 

②使用自定義圖標,

如果是作為普通組件引用,則根據iview官方文檔使用即可,如圖

 或

 

 

 

另外,這里以iview中的table組件使用render方式演示如何加載自定義圖標,type屬性必須保留且為空即可,custom屬性填寫圖標總稱和圖標名字

注意自定義圖標使用custom來定義圖標,第一個是圖標的總稱,第二個是圖標的名字(總稱和圖標名字可以在iconfonts.css文件中找到

 

 

render方式引入的最終效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM