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