下圖是uniapp官網中對uniapp中字體圖標使用規范的描述
這是官網地址中的原文鏈接 uniapp官網原文
從官網中對uniapp中字體圖標使用規范的描述里可以看出，uniapp中使用字體圖標的方式有兩種，一種是網絡路徑的字體圖標，另一種就是base64格式的字體圖標，本文只說明base64格式的字體圖標的使用方法。

第一步 下載iconfont圖標

首先打開阿里巴巴矢量圖標庫 阿里巴巴矢量圖標庫官網
選好想要的圖標后進入我的項目頁，點擊‘下載至本地’按鈕
下載下來是個壓縮包，解壓之后出現下面幾個文件
好！第一步就已經完成了！

第二步 將下載下來的文件轉成base64格式

首先打開 transfonter.org，這是一個免費的轉base64格式的網站
只用第一步下載下來的文件夾中的ttf格式的文件
將下載下來的壓縮包解壓得到下面三個文件
將第一步下載下來的文件夾中的這兩個文件復制到項目中專門存放靜態資源的文件夾中，該文件夾一般命名為static，當然，別的文件夾名也可以
打開轉碼完成的文件夾中的stylesheet.css文件，會看到如下內容
再打開已經復制到專門存放靜態資源的文件夾中的iconfont.css文件，會看到如下內容
將iconfont.css文件中最上面的代碼

@font-face {font-family: "iconfont"; /* Project id 3557841 */src: url('iconfont.woff2?t=1659191503158') format('woff2'),url('iconfont.woff?t=1659191503158') format('woff'),url('iconfont.ttf?t=1659191503158') format('truetype'); }

替換成stylesheet.css文件中的內容，下圖是最終效果
最后只需在需要用到字體圖標的頁面中引入iconfont.css即可
注意！此處有個小坑，在@import url()的結尾處一定要加分號，否則引入無效，而且不會報錯

總結

以上是生活随笔為你收集整理的uniapp小程序中使用base64格式的字体图标iconfont的详细步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。