本文介紹兩種方案：一、使用iconfont字體圖標(biāo) 二、使用icon圖片

情景1：使用灰色的字體圖標(biāo)

方案一：使用iconfont字體圖標(biāo)

步驟1：下載iconfont

步驟2：解壓后只需要將ifonfont.css這一個(gè)文件 ，單獨(dú)的放在你的項(xiàng)目的static>fonts下的某個(gè)文件下

步驟3：找到你項(xiàng)目下這個(gè)iconfont.css，修改樣式，將其他url全部刪除，只保留base64的那個(gè)url 且這個(gè)url最后的逗號(hào),也需要?jiǎng)h除
刪除前的css：

刪除后的css：

步驟4：引入：
注意:src字段的url的括號(hào)內(nèi)一定要使用單引號(hào)
①引入位置：你可以直接在app.vue內(nèi)引入；也可以在main.js內(nèi)引入；也可以在你的某個(gè)組件下引入。
②引入的方式：你可以直接style最上層 @import url()引入；也可以直接將剛才修改的iconfont.css直接整體復(fù)制一份在style最上層引入。
@import url()引入圖解:

復(fù)制iconfont.css方式引入

步驟5:使用
點(diǎn)擊之前解壓后的html文件,找到Font Class

代碼:
頁(yè)面:

方案二：使用icon圖片

（將icon下載成圖片使用：注意此方案只能改單色icon的顏色）

步驟1：選中圖片加入購(gòu)物車(chē)

步驟2：修改圖片的顏色，選擇下載圖片成的格式

下載后解壓得到圖片：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的uniapp使用iconfont字体图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。