uni-app引入iconfont圖標————多次入坑后的實踐,必看


最近項目用uniapp開發,要引入一些圖標庫。上網查了好多案例,但是試了多次都是要么就是不顯示,要么就是顯示方塊。所以寫個自己實踐入坑后的記錄。

1.進入iconfont官網,選一些要用到的圖標。鏈接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

然后如果自己的賬號中沒有項目,點擊新建項目

 

2.然后點擊Font class會有一個鏈接地址,訪問這個鏈接。然后點擊后面的“下載至本地”。

 

 鏈接會出現此內容

 3.然后將下載至本地的文件的中的iconfont.css文件放在項目的common文件中,如果沒有common,創建一個

 

 4。然后將步驟2中的訪問鏈接的所有內容復制粘貼到iconfont.css文件中,剛復制過來中@font-face的url沒有https:在所有//at前面加上https:

 

 5,然后在App.vue中引入,記住一定要放在style的下的第一行,而且要加上引號

 

 6,然后在頁面中使用即可,例如:

 

 

 

ps:

如果在App.vue引入的時候不放在第一行,會有一些影響。還有如果不加引號會出現下面的樣式不能用。

下面的樣式會變成白色,就不能引用了

 

 


免責聲明!

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



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