第一種：

步驟一：

打開阿里巴巴矢量圖標庫官網：iconfont-阿里巴巴矢量圖標庫

找到你要的圖標，把它們依次加入到你的購物車。

步驟二：

在購物車把它們添加到對應的項目中

在我的項目中，把圖標下載到本地。

下載的文件內容如下：

在vue的assets文件夾下創建icon文件夾，將下載的文件放入這個文件夾下

在main.js中引入import './assets/icon/iconfont.css'，這樣子就可以在vue項目中使用你下載的svg圖標

在vue中可以寫<span class="icon iconfont icon-right"></span>就可以正常顯示iconfont圖標，修改的時候只需要修改icon-right這個class就可以了，這個class名稱可以在font class中看到

如果后期想再添加圖片在iconfont.css拷貝過來添加到項目上

每次新增圖標后都要覆蓋一次資源文件

第二種：單個添加圖標

1.點擊生成在線鏈接，復制以下代碼：

2.在要顯示圖標的項目代碼的css文件中添加以下代碼：

@font-face {font-family: 'iconfont'; /* Project id 360936 */src: url('//at.alicdn.com/t/font_360936_mqv3e6qc4p.woff2?t=1625449512365') format('woff2'),url('//at.alicdn.com/t/font_360936_mqv3e6qc4p.woff?t=1625449512365') format('woff'),url('//at.alicdn.com/t/font_360936_mqv3e6qc4p.ttf?t=1625449512365') format('truetype'); } .iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale; } .icon-love::before {content:'\f285' }

注意：content:'\f285'中的“\f285”對應每個icon的編碼，如下圖所示：

常見的問題一：

問題：

uniapp項目在app.vue中引入@import '@/common/iconfont/iconfont.css';，項目會報以下錯誤：

文件查找失敗：'./iconfont.woff2?t=1656986652946' at App.vue:5

解決方案：

在iconfont.css中將引入字體文件的路徑更換為絕對路徑

總結

以上是生活随笔為你收集整理的vue 项目中使用阿里巴巴矢量图标库iconfont的全部內容，希望文章能夠幫你解決所遇到的問題。

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