---
# System prepended metadata

title: 在Nuxt 安裝與使用 Font Awesome 5 Icons
tags: [FrontEnd, Nuxt, Web, Vue]

---

###### 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  

```import '@fortawesome/fontawesome-free/css/all.css'```

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>
```
