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

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

Nov 05, 2021 am 10:43 AM
字體圖示小程式微信

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

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

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

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

操作步驟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具