在前端開發(fā)中，iconfont 是一個(gè)很常用的工具，它可以幫助我們快速的引入各種圖標(biāo)和字體，并且不用擔(dān)心分辨率的問題。而 Vue 作為現(xiàn)在前端開發(fā)中最火的框架之一，應(yīng)用也非常廣泛。那么，如何在 Vue 中使用 iconfont 呢？下面我們將詳細(xì)講解。

首先，我們需要在官網(wǎng)上注冊(cè)一個(gè)賬號(hào)，然后選擇想要使用的圖標(biāo)。然后選中它們，點(diǎn)擊iconfont.cn上的下載按鈕，然后在彈出的對(duì)話框中選擇“Unicode”格式或“Symbol”格式，然后點(diǎn)擊“下載，此時(shí)我們得到的就是我們需要的字體文件iconfont.ttf, 一個(gè) css 文件和一個(gè) demo 頁面。

@font-face {
font-family: 'iconfont';
src: url('./iconfont.eot'); /* IE9 */
src: url('./iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./iconfont.woff') format('woff'), /* chrome、firefox */
url('./iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url('./iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

現(xiàn)在我們需要將這些文件放在項(xiàng)目的某個(gè)文件夾下，然后在項(xiàng)目的 main.js 文件中使用import引入它們

import './assets/iconfont/iconfont.css'

在 Vue 中使用class綁定來應(yīng)用字體圖標(biāo)。在html模板中，我們可以加入如下代碼：



上面的例子中，是一個(gè)四位的 Unicode 碼，在這個(gè)項(xiàng)目中，它被轉(zhuǎn)換成了 heart 的圖標(biāo)。當(dāng)然，你也可以使用<i :class="`iconfont icon-${(tab.active)? tab.name : tab.name.concat('-o')}`">來綁定一個(gè)動(dòng)態(tài)的圖標(biāo)。

至此，我們已經(jīng)完成了 iconfont 的引入和使用。希望這篇文章能對(duì)你有所幫助。