微信小程序怎麼使用icon

小程序怎麼使用icon

第一步 下載icon

我選擇的圖標庫是阿里圖標官網， 加入購物車

第二步 轉換ttf

由於小程序的wxss文件的font-face的url不接受http地址做爲參數,但能夠接受base64,所以需將字體文件下載後,轉換爲base64，而後引用

• 進入https://transfonter.org/平臺
• 點擊Add fonts，添加iconfont.ttf
• 勾選Base64 encode
• 點擊 convert 完成轉換

• 按照上圖1,2,3的步驟 轉換完成， 點擊Download

第三步 在微信小程序中使用icon

• 解壓 第二步中的文件夾找到stylesheet.css 文件

• 打開第一步中壓縮包的iconfont.css，把裏面圈紅的部分（即fontface部分咱們不須要啦）複製到stylesheet.css

• 修改後的stylesheet.css

• 修改stylesheet.css的文件後綴爲wxss，即stylesheet.wxss
• 把stylesheet.wxss放進微信小程序的公共文件裏面，而後把整個文件import到頁面的樣式表裏

• 在wxml頁面引入使用

完結

原文地址