小程序原生提供的icon非常有限,大多數情況都需要我們自定義實現。
通常我們會去阿里巴巴的iconfont網站下載自己需要的icon,然后放入小程序中使用。如果找不到滿意的,也可以自己繪制svg文件。
從iconfont下載
選擇圖標,加入項目
生成代碼
復制代碼,放到小程序文件中
content填上圖標的unicode編碼。這個編碼在網站頁面上可以看到。
在wxml中使用
效果
紅色是我們設置的color,可以設置。
自己制作svg
如果我們對找到的圖標都不滿意,可以自己設計一個。
推薦一個網站【在線PS軟件】在線PS圖片(照片)處理工具_在線制作編輯圖片ps精簡版 (uupoop)
不需要安裝photoshop,直接在線編輯,完全免費。
比如上面的hide圖片。
編輯svg圖片
將上面的hide圖片下載svg格式到本地。
然后在uupoop網站打開編輯。
然后下載新的svg
上傳新的icon至iconfont網站
因為我們更新了icon,網站會要求我們重新生成下代碼
重新復制代碼到小程序中
看到新制作的圖標已經顯示出來了。