我們需要在iconfont官網中下載自己需要的圖標
然后解壓出來

這個我們需要這幾個文件

在uni項目中根目錄下的static下創建文件夾名字叫iconfont
將這里這個iconfont.css改名為 index.css 放在剛創建的iconfont文件夾下
然后在iconfont文件夾下創建font文件夾 里面放其他三個文件
這里需要注意 要打開index.css改一下他引入這幾個文件的路徑 因為uni中是不能用當前目錄的 必須從項目的根目錄開始寫路徑才能找到這些文件


然后在App.vue根組件中的style標簽中寫入代碼 引入index.css

@import url("static/iconfont/index.css");

這里的路徑也要相對于項目的根目錄開始找
然后App.vue引入了 那其他組件自然也就都可以使用圖標啦

<view class = "nav"><view class = "nav_item"><view class="icon iconfont">&#xe600;</view><text>黑馬超市</text></view><view class = "nav_item"><view class="icon iconfont">&#xe612;</view><text>聯系我們</text></view><view class = "nav_item"><view class="icon iconfont">&#xe67f;</view><text>社區圖片</text></view><view class = "nav_item"><view class="icon iconfont">&#xe63b;</view><text>學習視頻</text></view> </view>

當然 我這做了些樣式的處理 不過用過PC端的iconfont的朋友應該也一眼就看明白了
確實還是很簡單的

總結

以上是生活随笔為你收集整理的uni-app引入iconfont图标的全部內容，希望文章能夠幫你解決所遇到的問題。

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