###### tags: `Web` `FrontEnd` `Vue` `Nuxt`

# 在Nuxt 安裝與使用 Font Awesome 5 Icons

使用前檢查專案是否有裝css-loader，若無安裝則需先安裝css-loader

## 一、安裝

### 1. 安裝Cli :

`$ npm install @fortawesome/fontawesome-free -D`

### 2. Import fontawesome-free Css

至Plung/vuetify

or

至nuxt.config.js import

css: [
'@fortawesome/fontawesome-free/css/all.css'
],

### 3. 將awesome設置成預設使用

至Plung/vuetify 設置iconfont

icons: {
iconfont: 'fa',
},

## 二、使用

### 使用方式

| 方式 | 範例 |
| ------ | ------ |
| 使用Class |  ``` <i class="fas fa-wifi"></i> ```|
| 使用v-icon|```<v-icon>fas fa-wifi</v-icon>``` |
| 使用v-icon|```<v-icon v-text="'fas fa-wifi'"></v-icon>``` |
| 使用v-icon|```<v-icon v-html="'fas fa-wifi'"></v-icon>``` |

### 調整大小

#### 針對class方法調整大小

![image](uploads/29870536dfba11f25337fc39ecd902ae/image.png)

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

#### 針對v-icon方法調整大小

<v-icon x-small>fas fa-camera fa</v-icon>
<v-icon small>fas fa-camera fa</v-icon>
<v-icon dense>fas fa-camera fa</v-icon>
<v-icon large>fas fa-camera fa</v-icon>
<v-icon x-large>fas fa-camera fa</v-icon>

### 使用Global變數方法

至 Plung/vuetify設置values

icons: {
iconfont: 'fa',
values: {
wifi: 'fas fa-wifi',
},
},

html使用

<v-icon>$vuetify.icons.wifi</v-icon>
<v-icon>$wifi</v-icon>
<v-icon v-text="'$vuetify.icons.wifi'"></v-icon>
<v-icon v-text="'$wifi'"></v-icon>
<v-icon v-html="'$vuetify.icons.wifi'"></v-icon>
<v-icon v-html="'$wifi'"></v-icon>