本人剛開始接觸微信小程序,發現它自帶的icons樣式太少,在網上搜索里一番,自己稍微整理里一下,供大家參考。
1.我使用了阿里巴巴的矢量圖標庫,http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=3287,這里面的圖標相對很豐富,并且淘票票專業版使用的也是該圖標,很適用與手機端,將需要使用的圖標添加到購物車,然后點擊下載代碼,統一下載,如圖所示;
2.在本地找到下載的文件并解壓,在文件夾下找到iconfont.css文件并打開此文件,將其代碼粘貼到微信小程序項目里,放在style樣式里,本人用的wepy框架,直接放在了app.wpy文件里的style樣式下,方便整個項目里都可以直接引用下載的圖標了,當然也可以放在單個頁面里,隨個人要求,如圖所示:
3.然后我們就可以在代碼里直接引用我們的圖標啦,圖標大小和顏色可以直接在style里修改,如圖所示:
然后就大功告成啦!不過要注意,每次新下載的圖標它里面的文件內容都是不一樣的,需要重新拷貝所有內容,不要以為下載了一次之后再下載其他圖標都是同樣的font-face,因為我踩了這個坑,所以就寫出來告訴大家啦!