快捷導(dǎo)航

Vue開發(fā)項(xiàng)目中如何使用Font Awesome 5

更新時間：2021年11月11日 14:52:36 作者：Noodlewar

Font Awesome是一套流行的圖標(biāo)字體庫,我們在實(shí)際開發(fā)的過程中會經(jīng)常遇到需要使用圖標(biāo)的場景,對于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下

前端小伙伴們都知道Font Awesome圖標(biāo)庫，它具有豐富的常用圖標(biāo)，筆者開發(fā)時也經(jīng)常使用，省卻了自己到處找圖標(biāo)的困擾，當(dāng)然阿里的iconfont也不錯，不過它比較雜亂，找的圖標(biāo)有時候不是配套的，尺寸和比例上有些偏差，即使你只使用某一個圖標(biāo)庫的圖標(biāo)難免也會有收錄不全的情況（這是筆者的使用體驗(yàn)，絕對沒有貶低iconfont的意思，勿噴），F(xiàn)ont Awesome通過幾年的發(fā)展已經(jīng)收錄了互聯(lián)網(wǎng)最常用的圖標(biāo)，絕對能滿足大多數(shù)人的開發(fā)需求（有美工還用自己動手？?。。┊?dāng)然，看標(biāo)題就知道Font Awesome已經(jīng)進(jìn)入5時代，使用方法上也和4以前的版本有所不同，而且還增加了收費(fèi)版。。。當(dāng)然免費(fèi)版已經(jīng)足夠大家使用啦！下面筆者就給大伙兒講講如何在自己的vue開發(fā)項(xiàng)目中使用Font Awesome 5

安裝依賴

1. 安裝基礎(chǔ)依賴

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/vue-fontawesome

2. 安裝樣式依賴

$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

注意：

免費(fèi)版支持三種樣式：solid、regular和brands，后面在使用圖標(biāo)時根據(jù)樣式的不同也會有不同的前綴
如果下載依賴失敗，試試cnpm，不贅述了！

配置

進(jìn)入main.js文件配置Font Awesome，配置方式比起4以前多了一些代碼

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)

Vue.component('font-awesome-icon', FontAwesomeIcon)