微信小程序開發:使用字體圖標的方法

在微信小程序開發過程中,圖標的使用是很常見很普遍的。一般情況下,在微信小程序項目的文件目錄裏面images裏面,可以直接引用本地的圖標文件,但是通過使用字體圖標或者background設置背景圖的時候,就不用引用本地圖標文件,只能使用根據URL鏈接地址的字體或者圖片,再或者使用base64把普通圖標編碼之後的格式。

那麼本篇博文就來分享一下微信小程序項目中怎麼使用字體圖標,以及把字體的URL轉化成base64的格式之後再使用的方法。本案例以某裏巴巴矢量圖標庫來舉例子,具體操作如下所示。

1、首先打開某裏巴巴矢量圖標庫的官網,然後搜索查找想要的圖標,然後單擊選擇“添加入庫”按鈕;

2、去購物車找到添加進入的字體,然後單擊選擇,選擇底部菜單欄裏面的”添加至項目“按鈕;

3、點擊右上角”+“按鈕,然後輸入項目名稱,點擊”確定“按鈕;

4、然後去新建的項目中找到添加的字體,然後單擊選中,點擊”下載至本地“按鈕,即可下載到電腦本地;

5、找到下載到電腦本地的字體文件,然後打開該文件,打開裏面的iconfont.css文件,然後直接複製裏面的url和iconfont方法,所有的樣式,直接粘貼到需要使用字體圖標的wxss文件中;

6、最後在使用字體圖標的wxml文件中調用一下,即可。

以上案例是按照某裏巴巴矢量圖標庫來做例子講解的,有好多種字體圖標轉化的網站平臺,所以其他平臺就不再一一介紹,感興趣的開發者可以去了解其他平臺的使用方法。

 

以上就是本章全部內容,歡迎關注三掌櫃的微信公衆號“iOS開發by三掌櫃”,三掌櫃的新浪微博“三掌櫃666”,歡迎關注!

三掌櫃的微信公衆號:

三掌櫃的新浪微博:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章