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