vue配置font-awesome5的方法步驟
前端小伙伴們都知道Font Awesome圖標(biāo)庫，它具有豐富的常用圖標(biāo)，筆者開發(fā)時(shí)也經(jīng)常使用，省卻了自己到處找圖標(biāo)的困擾，當(dāng)然阿里的iconfont也不錯(cuò)，不過它比較雜亂，找的圖標(biāo)有時(shí)候不是配套的，尺寸和比例上有些偏差，即使你只使用某一個(gè)圖標(biāo)庫的圖標(biāo)難免也會(huì)有收錄不全的情況（這是筆者的使用體驗(yàn)，絕對(duì)沒有貶低iconfont的意思，勿噴），F(xiàn)ont Awesome通過幾年的發(fā)展已經(jīng)收錄了互聯(lián)網(wǎng)最常用的圖標(biāo)，絕對(duì)能滿足大多數(shù)人的開發(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開發(fā)項(xiàng)目中使用Font Awesome 5
vue的配置就暫且不說，主要是之后的font-awesome5的配置：
1、安裝fontawesome基礎(chǔ)配置
npm i --save @fortawesome/fontawesome npm i --save @fortawesome/vue-fontawesome
2、安裝fontawesome樣式依賴
npm i --save @forawesome/fontawesome-free-solid npm i --save @forawesome/fontawesome-free-regular npm i --save @fortawesome/fontawesome-free-brands
或者兩步合一
3、在main.js中配置font-awesome
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)
4、在vue頁面使用
<font-awesome-icon :icon="['far','address-book']"/>
當(dāng)然并非一定要寫成font-awesome-icon標(biāo)簽，它只是組件與main.js里面的Vue.component對(duì)照，main.js的Vue.component只是將其作為全局組件。在:icon="['樣式','省去樣式前綴的圖表名']"，
上面這些是使用font-awesome 5.0.13
對(duì)于5.6.3版本來說，因?yàn)樾略黾恿薋ont Awesome SVG Core.所以5.6.3的安裝:
1、安裝fontawesome基礎(chǔ)配置
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome
2、在main.js中配置font-awesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
3、在頁面中可以寫入
<font-awesome-icon icon="address-book" />
或
<font-awesome-icon :icon="['fas', 'address-book']" />
對(duì)于非fas的可以直接寫
<font-awesome-icon far icon="spinner" />
還剩下fal和fab的這兩項(xiàng)在5.6.3版本中尚不知道不用pro該怎么安裝，求大佬補(bǔ)充
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動(dòng)放大縮小等功能。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下2022-11-11
Vue項(xiàng)目三級(jí)聯(lián)動(dòng)路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項(xiàng)目三級(jí)聯(lián)動(dòng)的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
watchEffect，它立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)，本文主要介紹了Vue3中watchEffect的具體用法，感興趣的可以了解一下2022-05-05
這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue.js組件props數(shù)據(jù)驗(yàn)證實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js組件props數(shù)據(jù)驗(yàn)證的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
詳解使用VUE搭建后臺(tái)管理系統(tǒng)(vue-cli更新至3.0)
這篇文章主要介紹了詳解使用VUE搭建后臺(tái)管理系統(tǒng)(vue-cli更新至3.0),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue elementUI 表單校驗(yàn)的實(shí)現(xiàn)代碼（多層嵌套）
這篇文章主要介紹了vue elementUI 表單校驗(yàn)的實(shí)現(xiàn)代碼（多層嵌套），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題詳解
最近element-ui遇到了很多坑,下面這篇文章主要給大家介紹了關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在項(xiàng)目開發(fā)過程中,可能需要實(shí)現(xiàn)以下場(chǎng)景,未讀消息提示、報(bào)警信息、消息通知等,下面這篇文章主要給大家介紹了關(guān)于vue通知提醒消息的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
今天小編就為大家分享一篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09