首頁 > 微信小程式 > 小程式開發 > 手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

青灯夜游
發布: 2021-11-05 10:43:40
轉載
4878 人瀏覽過

小程式中怎麼使用字體圖示?以下這篇文章就以某里巴巴向量圖示為例,為大家介紹一下在小程式中使用字體圖示的方法,希望對大家有幫助!

手把手教你怎麼在小程式中使用字體圖標

在微信小程式開發過程中,圖示的使用是很常見且很普遍的。一般情況下,在微信小程式專案的文件目錄裡面images裡面,可以直接引用本地的圖示文件,但是透過使用字體圖示或background設定背景圖的時候,就不用引用本地圖示文件,只能使用根據URL鏈接地址的字體或圖片,再或使用base64把普通圖示編碼之後的格式。 【相關學習推薦:小程式開發教學

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

操作步驟

1、先打開某里巴巴向量圖標庫的官網,然後搜尋尋找想要的圖標,然後點擊選擇「新增入庫」按鈕;

手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

2、去購物車找到已加入的字體,然後按一下選擇,選擇底部功能表列裡面的」新增至項目「按鈕;

手把手教你怎麼在小程式中使用字體圖標

3、點選右上角」 「按鈕,然後輸入項目名稱,點選」確定「按鈕;

手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

手把手教你怎麼在小程式中使用字體圖標

##4、然後去新建的專案中找到新增的字體,然後按一下選中,點選」下載至本機「按鈕,即可下載至電腦本機;

手把手教你怎麼在小程式中使用字體圖標

1手把手教你怎麼在小程式中使用字體圖標

1手把手教你怎麼在小程式中使用字體圖標

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

1手把手教你怎麼在小程式中使用字體圖標

########6、最後在使用字體圖示的wxml檔案中呼叫一下,即可。 ###############最後######以上案例是按照某里巴巴向量圖示庫來做例子講解的,有許多字體圖示轉換的網站平台,所以其他平台就不再一一介紹,有興趣的開發者可以去了解其他平台的使用方法。這就是本文關於在微信小程式開發的時候使用字體圖示的方法,分享給有需要的人,這裡不再贅述。 ######更多程式相關知識,請造訪:###程式設計教學###! ! ###

以上是手把手教你怎麼在小程式中使用字體圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板