在微信小程序中引入 Iconfont 阿里巴巴圖標庫


小程序的代碼包不能超過4M,為了壓縮代碼包的大小,可以通過第三方鏈接引入圖標資源

Iconfont 無疑是最常用的第三方圖標庫,這里介紹一下在微信小程序引入 Iconfont 的方法

 

一、下載圖標

首先挑選圖標,添加入庫

然后添加至項目

 

然后在“我的項目”中,將資源文件下載到本地

建議設置為 font class

 

二、在項目中引入資源

在小程序項目中建一個 iconfont.wxss

在下載的資源文件中有一個 iconfont.css,復制文件中所有代碼,粘貼到 iconfont.wxss

然后在 app.wxss 中引入

/**app.wxss**/
@import 'styles/iconfont.wxss';

這時 font-face 中引入的資源文件還是本地路徑

 

三、將資源路徑改為外鏈

在“我的項目”中,將圖標格式設為 Unicode,然后“查看在線鏈接”

復制生成的代碼

粘貼到 iconfont.wxss 中,替換掉原本的 font-face

保存之后即可正常使用

 


免責聲明!

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



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