@font-face {
  ...
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在 main.js 中引入 css 文件

...
import './assets/css/global.css'
...

使用

<i class="iconfont">&#xe63b;</i> // Unicode格式

vue使用iconfont多色圖標(biāo)

1.新建一個(gè)項(xiàng)目，用于存放該項(xiàng)目應(yīng)用的所有圖標(biāo)，項(xiàng)目名稱自定義。

2.挑選自己心儀的圖標(biāo)，并點(diǎn)擊添加入庫(kù)

3.點(diǎn)擊導(dǎo)航欄上的“購(gòu)物車”圖標(biāo)，查看自己添加入庫(kù)的圖標(biāo)，并添加至項(xiàng)目

4.進(jìn)入自己的項(xiàng)目庫(kù)，選擇symbol 引用，點(diǎn)擊查看在線鏈接

5.在vue項(xiàng)目中新建一個(gè)js文件，文件名自定義，將點(diǎn)擊的在線鏈接里面的內(nèi)容全部復(fù)制到j(luò)s文件中

6.在main.js中全局引用該js文件

7.將icon圖標(biāo)放至相應(yīng)的位置，用css樣式width、height可調(diào)整icon大小

<svg class="icon" aria-hidden="true" style="width:15px;height:15px;">
????????<use xlink:href="#icon-wancheng" rel="external nofollow" ></use>
</svg>

8.后續(xù)若添加新的icon圖標(biāo)至該項(xiàng)目，點(diǎn)擊此處紅字更新代碼，進(jìn)入在線鏈接全部復(fù)制后，將剛才的創(chuàng)建的js文件內(nèi)容全部替換，無(wú)需再進(jìn)行全局引入，將心儀的icon圖標(biāo)放至相應(yīng)位置即可，代碼格式詳見第七條