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

情景1：使用灰色的字體圖標

方案一：使用iconfont字體圖標

步驟1：下載iconfont

步驟2：解壓后只需要將ifonfont.css這一個文件 ，單獨的放在你的項目的static>fonts下的某個文件下

步驟3：找到你項目下這個iconfont.css，修改樣式，將其他url全部刪除，只保留base64的那個url 且這個url最后的逗號,也需要刪除
刪除前的css：

刪除后的css：

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

復制iconfont.css方式引入

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

代碼:
頁面:

方案二：使用icon圖片

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

步驟1：選中圖片加入購物車

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

下載后解壓得到圖片：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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