在微信小程序開發過程中,圖標的使用是很常見很普遍的。一般情況下,在微信小程序項目的文件目錄裏面images裏面,可以直接引用本地的圖標文件,但是通過使用字體圖標或者background設置背景圖的時候,就不用引用本地圖標文件,只能使用根據URL鏈接地址的字體或者圖片,再或者使用base64把普通圖標編碼之後的格式。
那麼本篇博文就來分享一下微信小程序項目中怎麼使用字體圖標,以及把字體的URL轉化成base64的格式之後再使用的方法。本案例以某裏巴巴矢量圖標庫來舉例子,具體操作如下所示。
1、首先打開某裏巴巴矢量圖標庫的官網,然後搜索查找想要的圖標,然後單擊選擇“添加入庫”按鈕;
2、去購物車找到添加進入的字體,然後單擊選擇,選擇底部菜單欄裏面的”添加至項目“按鈕;
3、點擊右上角”+“按鈕,然後輸入項目名稱,點擊”確定“按鈕;
4、然後去新建的項目中找到添加的字體,然後單擊選中,點擊”下載至本地“按鈕,即可下載到電腦本地;
5、找到下載到電腦本地的字體文件,然後打開該文件,打開裏面的iconfont.css文件,然後直接複製裏面的url和iconfont方法,所有的樣式,直接粘貼到需要使用字體圖標的wxss文件中;
6、最後在使用字體圖標的wxml文件中調用一下,即可。
以上案例是按照某裏巴巴矢量圖標庫來做例子講解的,有好多種字體圖標轉化的網站平臺,所以其他平臺就不再一一介紹,感興趣的開發者可以去了解其他平臺的使用方法。
以上就是本章全部內容,歡迎關注三掌櫃的微信公衆號“iOS開發by三掌櫃”,三掌櫃的新浪微博“三掌櫃666”,歡迎關注!
三掌櫃的微信公衆號:
三掌櫃的新浪微博: