Font Awesome 官網(wǎng)：https://fontawesome.com/

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

安裝依賴(lài)

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

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

2. 安裝樣式依賴(lài)

$ 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)時(shí)根據(jù)樣式的不同也會(huì)有不同的前綴
• 如果下載依賴(lài)失敗，試試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)

使用

ok，配置完成之后你就可以隨心所欲的在你的項(xiàng)目上使用Font Awesome了，使用方法如下：

例如，我們想使用 “用戶(hù)” 這個(gè)圖標(biāo)：

1. 進(jìn)入圖標(biāo)搜索頁(yè)

搜索地址： https://fontawesome.com/icons...

2. 輸入想使用的圖標(biāo)的英文，例如用戶(hù)的英文是 user

3. 過(guò)濾收費(fèi)圖標(biāo)

搜索結(jié)果有些是灰色的表示是收費(fèi)版的，我們可以在左邊點(diǎn)擊篩選項(xiàng)Free來(lái)過(guò)濾掉收費(fèi)版

4.點(diǎn)擊圖標(biāo)查看

選擇一個(gè)自己滿(mǎn)意的圖標(biāo)點(diǎn)進(jìn)去查看內(nèi)容

右邊是選取哪種樣式，這里可以看到這個(gè)圖標(biāo)支持solid和regular和light（收費(fèi)樣式），然后下面就是我們熟悉的使用代碼了，不過(guò)在Vue里不能這樣直接使用了，要改為以下的寫(xiě)法：

<font-awesome-icon :icon="['fas','user]"/>

往icon屬性里傳入一個(gè)數(shù)組，第一個(gè)參數(shù)是樣式，第二個(gè)就是圖標(biāo)名，看起來(lái)好像節(jié)省了寫(xiě) “fa-” 這幾個(gè)字符，但是結(jié)構(gòu)感覺(jué)比以前復(fù)雜(⊙o⊙)…

5. 查看結(jié)果

OK，是時(shí)候查看我們辛苦工作的結(jié)果了，打開(kāi)瀏覽器查看圖標(biāo)效果，引入成功！

總結(jié)

Font Awesome 5比之前的版本在圖標(biāo)優(yōu)化上絕對(duì)是完美級(jí)別的，而且圖標(biāo)庫(kù)內(nèi)容也豐富了很多，不過(guò)在配置上相對(duì)以前要繁瑣，需要花一點(diǎn)時(shí)間， 總體來(lái)說(shuō)是一個(gè)很棒的圖標(biāo)庫(kù)，如果覺(jué)得有用的小伙伴兒麻煩點(diǎn)個(gè)贊哦！

到此這篇關(guān)于Vue開(kāi)發(fā)項(xiàng)目中如何使用Font Awesome 5的文章就介紹到這了,更多相關(guān)Vue使用Font Awesome5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論