vue配置font-awesome5的方法步驟
前端小伙伴們都知道Font Awesome圖標(biāo)庫，它具有豐富的常用圖標(biāo)，筆者開發(fā)時(shí)也經(jīng)常使用，省卻了自己到處找圖標(biāo)的困擾，當(dāng)然阿里的iconfont也不錯，不過它比較雜亂，找的圖標(biāo)有時(shí)候不是配套的，尺寸和比例上有些偏差，即使你只使用某一個(gè)圖標(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時(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對照，main.js的Vue.component只是將其作為全局組件。在:icon="['樣式','省去樣式前綴的圖表名']"，
上面這些是使用font-awesome 5.0.13
對于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']" />
對于非fas的可以直接寫
<font-awesome-icon far icon="spinner" />
還剩下fal和fab的這兩項(xiàng)在5.6.3版本中尚不知道不用pro該怎么安裝，求大佬補(bǔ)充
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中v-html圖片過大導(dǎo)致溢出的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue3中簡單使用Mock.js方法,mock.js在模擬后端接口數(shù)據(jù)響應(yīng)與協(xié)調(diào)統(tǒng)一前后端開發(fā)接口規(guī)范方面有著重要的應(yīng)用,需要的朋友可以參考下2023-04-04
我們在開發(fā) Vue 項(xiàng)目的時(shí)候會使用一些前端組件庫,例如 Element、Ant Design 等,這些組件庫雖然方便,但是也有一些缺點(diǎn),比如內(nèi)置的圖標(biāo)太少,例如我們開發(fā)醫(yī)療、財(cái)務(wù)、工程等一些前端項(xiàng)目,內(nèi)置的圖標(biāo)不能滿足我們的需求,所以我們常常在Vue項(xiàng)目中引入SVG圖標(biāo)2024-09-09
vue component 中引入less文件報(bào)錯 Module build failed
這篇文章主要介紹了vue component 中引入less文件報(bào)錯 Module build failed的解決方法，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式
這篇文章主要介紹了vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用vue3實(shí)現(xiàn)一個(gè)高德地圖天氣小組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
element-ui?table表格控件實(shí)現(xiàn)單選功能代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于element-ui?table表格控件實(shí)現(xiàn)單選功能的相關(guān)資料,單選框是指在?Element?UI?的表格組件中,可以通過單選框來選擇一行數(shù)據(jù)。用戶只能選擇一行數(shù)據(jù),而不能同時(shí)選擇多行,需要的朋友可以參考下2023-09-09
使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼
本篇文章主要介紹了使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了詳解使用vue實(shí)現(xiàn)tab操作,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)
這篇文章主要介紹了Vue組件設(shè)計(jì)之多列表拖拽交換排序,常見的場景有單列表拖拽排序，多列表拖拽交換排序，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05