第一種：

步驟一：

打開(kāi)阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)：iconfont-阿里巴巴矢量圖標(biāo)庫(kù)

找到你要的圖標(biāo)，把它們依次加入到你的購(gòu)物車(chē)。

步驟二：

在購(gòu)物車(chē)把它們添加到對(duì)應(yīng)的項(xiàng)目中

在我的項(xiàng)目中，把圖標(biāo)下載到本地。

下載的文件內(nèi)容如下：

在vue的assets文件夾下創(chuàng)建icon文件夾，將下載的文件放入這個(gè)文件夾下

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

在vue中可以寫(xiě)<span class="icon iconfont icon-right"></span>就可以正常顯示iconfont圖標(biāo)，修改的時(shí)候只需要修改icon-right這個(gè)class就可以了，這個(gè)class名稱(chēng)可以在font class中看到

如果后期想再添加圖片在iconfont.css拷貝過(guò)來(lái)添加到項(xiàng)目上

每次新增圖標(biāo)后都要覆蓋一次資源文件

第二種：單個(gè)添加圖標(biāo)

1.點(diǎn)擊生成在線(xiàn)鏈接，復(fù)制以下代碼：

2.在要顯示圖標(biāo)的項(xiàng)目代碼的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”對(duì)應(yīng)每個(gè)icon的編碼，如下圖所示：

常見(jiàn)的問(wèn)題一：

問(wèn)題：

uniapp項(xiàng)目在app.vue中引入@import '@/common/iconfont/iconfont.css';，項(xiàng)目會(huì)報(bào)以下錯(cuò)誤：

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

解決方案：

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

總結(jié)

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

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