問題背景
開發微信小程序是,往往要使用到icon圖標,因為官方提供的icon圖標少的可憐,所以不得不想辦法搞一些非官方提供的icon來使用,下面就簡單介紹一下怎樣在微信小程序中添加使用非官方提供的icon圖標
實現步驟:
1.去阿里巴巴矢量圖標庫下載想要的圖標 轉到:http://www.iconfont.cn
搜索想要的圖標,加入購物車,最后點擊下載代碼。
將下載后的壓縮包解壓后,找到iconfont.css文件復制到小程序項目中,並將后綴名改為.wxss
2.在需要使用擴展圖標的頁面的wxss文件中或者在app.wxss里面全局引入剛才復制並改完后綴的iconfont.wxss文件
@import "../../../css/iconfont.wxss";
3.在wxml中使用
用text標簽加上class名的方式添加icon圖標
<text class='iconfont icon-jiahao' style='color:#0ABA07;font-size:30px;'></text>
到這里,微信小程序中擴展icon圖標的添加就完成啦。