1、前言：使用矢量圖標，可以靈活設置字體圖標的大小，顏色，達到自適應的效果

2、阿里巴巴矢量圖標庫：https://www.iconfont.cn/

3、參考文檔：https://www.cnblogs.com/daojiao/p/10983766.html

4、操作：

（1）進入https://www.iconfont.cn/，注冊登錄該網站

搜索自己想要的圖標，選擇->入庫->添加到自己的項目中

在右上角點擊購物車圖標，出現如下圖

（2）每次項目圖標庫中的圖標有變更的時候，先點擊更新代碼，再點擊下載至本地，下載的東西，把iconfont.css文件復制粘貼到你的項目。

將iconfont.css中的 @font-face 替換成網絡資源（注意：文件里@font-face要替換成圖標庫網站生成的@font-face），//at 前全部替換成 https: //at

（3）iconfont.css 添加如下內容（圖標可以通過text view button等組件引用）。

text[class*="icon-"],
view[class*="icon-"],
button[class*="icon-"] {
    font-family: "iconfont";
    font-size: inherit;
    font-style: normal;
}

（4）資源文件已經處理好了，開始引用，可以全局應用（在app.vue中style中添加引用），也可以局部引用（指定.vue中的style中添加引用），建議全局引用

（5）page頁面引用

<view class="icon-sousuo"></view>

總結

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

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