Vue 中使用 Font Awesome 字型圖示

1.安裝

官網

轉載于 https://blog.csdn.net/qq_40663357/article/details/99655930

安裝基礎依賴：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

           

安裝樣式依賴

Font Awosome 為我們提供了 Solid、Regular、Brands 這三種免費樣式（日常使用完全足夠）

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

           

2.在項目的main.js中加入以下配置；

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText }
 from '@fortawesome/vue-fontawesome'
 
library.add(fas, far, fab)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

           

3.三種免費樣式介紹

1.solid 樣式，字首為：fas

2.regular 樣式，字首為：far

3.brands 樣式，字首為：fab

4.使用方法

1.顯示圖示

1.我們使用 font-awesome-icon 标簽來顯示圖示，icon 屬性中可以設定樣式字首、以及圖示名字。

<font-awesome-icon :icon="['fas', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['fab', 'accessible-icon']" />

           

2.如果是 solid 樣式（字首為：fas），則字首可以省略。比如上面第一個圖示等效下面寫法：

2.設定圖示大小

<font-awesome-icon icon="chess-knight"  />
<font-awesome-icon icon="chess-knight" size="xs" />
<font-awesome-icon icon="chess-knight" size="lg"  />
<font-awesome-icon icon="chess-knight" size="2x" />

           

3.固定圖示寬度

<font-awesome-icon icon="home" fixed-width /> home <br>
<font-awesome-icon icon="child" fixed-width /> help <br>
<font-awesome-icon icon="cog" fixed-width /> settings <br>

           

4.旋轉圖示

<font-awesome-icon icon="chess-knight" rotation="0" />
<font-awesome-icon icon="chess-knight" rotation="90" />
<font-awesome-icon icon="chess-knight" rotation="180" />
<font-awesome-icon icon="chess-knight" rotation="270" />

           

5.旋轉動畫效果

添加 spin 屬性可以讓圖示不停地順時針旋轉。
           

添加 pulse 屬性同樣可以讓圖示旋轉，但它不像 spin 那樣是均勻地變化角度，而是 0 度、45 度、90 度…這樣跳躍地變化。
           

<font-awesome-icon icon="arrow-circle-down" pulse />

           

6.圖示居左、居右

<font-awesome-icon icon="clipboard-list" size="2x" pull="left"/>
welcome to hangge.com welcome to hangge.com

           

<font-awesome-icon icon="clipboard-list" size="2x" pull="right"/>
welcome to hangge.com welcome to hangge.com

           

7.給圖示加上邊框（border）

給圖示加上邊框（border）

<font-awesome-icon icon="clipboard-list" size="2x" pull="right" border />
welcome to hangge.com welcome to hangge.com