天天看點

微信小程式wxss樣式檔案中引用iconfont素材

原因: 小程式的wxss檔案font-face的url不接受http位址作為參數,可以接受base64,是以可以先将字型檔案下載下傳後,轉換為base64,然後引用。

解決方案如下:

一.下載下傳阿裡巴巴矢量庫中自己項目的iconfont字型檔案.
微信小程式wxss樣式檔案中引用iconfont素材
微信小程式wxss樣式檔案中引用iconfont素材
二. 打開這個網站, ​​Online @font-face generator​​ 上傳字型,選擇base64編碼,Convert後下載下傳.
微信小程式wxss樣式檔案中引用iconfont素材
微信小程式wxss樣式檔案中引用iconfont素材
微信小程式wxss樣式檔案中引用iconfont素材
三. 将下載下傳好的檔案夾中stylesheet.css樣式表中的内容拷貝, 粘貼至小程式的wxss檔案中,即可引用該iconfont字型圖示.
微信小程式wxss樣式檔案中引用iconfont素材
微信小程式wxss樣式檔案中引用iconfont素材

繼續閱讀