Vue 中使用 Font Awesome 字体图标

1.安装

安装基础依赖：

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），则前缀可以省略。比如上面第一个图标等效下面写法：

<font-awesome-icon icon="square" />

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