【備忘録・HTML】Font Awesomeでアイコンを表示する方法

## はじめに

こんにちは、だいごです。
今回はFont Awesomeを用いて表示する方法をまとめていきます。
よかったらご覧ください。

## Font Awesomeとは

アイコンを文字として扱うことを可能にしたツール。
画像ではなく文字なので、大きさや色などを変更することが可能。

[Font Awesome](https://fontawesome.com/)

## アイコンを表示させる方法

ここからは簡単なコードを書きながらアイコンを表示させていきます。
完成イメージとしてはこんな感じになります。
![スクリーンショット 2022-04-27 22.59.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/3db24bcb-dc5f-20c3-0ce5-1d7a266fb22a.png)
まずは以下のコードをHTMLのheadの部分に記述します。

```html
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
```

この記述をする際の注意点としては、`v5.6.1`の部分です。
ここはFont Awesomeのバージョンに合わせる必要があるので、以下の場合では、`v6.1.1`となります。
![スクリーンショット 2022-04-27 23.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/43f368fd-be5f-529c-3982-a4822f8b510d.png)

続いて、[Font Awesome](https://fontawesome.com/)のサイトで検索を行い使用するアイコンを探します。
アイコンを検索し、選択すると以下のような画面になるので、HTMLコードをコピーします。
![スクリーンショット 2022-04-27 23.16.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/8121f1fa-2597-de85-e8cf-dbd09c625b81.png)
あとはコピーしたコードをアイコンを表示したい位置に貼り付けてあげればOKです。

```html
<p><i class="fab fa-twitter"></i>Twitter</p>
```

## アイコンの編集

このアイコンは文字として扱われるので、CSSでの編集が可能ですが、HTML上でも編集が可能です。

#### サイズの変更

iタグのclassに`fa-lg`を追加することでサイズを変更することできます。

```html
<!-- 1.333...倍 -->
<i class="fab fa-twitter fa-lg"></i>
<!-- 2倍 --> 
<i class="fab fa-twitter fa-2x"></i>
<!-- 3倍 --> 
<i class="fab fa-twitter fa-3x"></i>
<!-- 4倍 --> 
<i class="fab fa-twitter fa-4x"></i>
<!-- 5倍 -->
<i class="fab fa-twitter fa-5x"></i>
```
![スクリーンショット 2022-04-28 10.33.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/30dbbfbd-ceeb-27ab-810c-9ecf7388da58.png)

#### 色の変更

iタグのclassに`my-example`を追加し、CSSで色を指定することで変更することができます。

```html
<i class="fab fa-twitter my-gray"></i>
<i class="fab fa-twitter my-skyblue"></i> 
<i class="fab fa-twitter my-orange"></i>
```
```css
.my-gray {color: gray}
.my-skyblue {color: skyblue}
.my-orange {color: orange}
```
また、iタグにstyleを追加することで、色を変更することもできます。

```html
<i class="fab fa-twitter" style="color:gray"></i>
<i class="fab fa-twitter" style="color:skyblue"></i> 
<i class="fab fa-twitter" style="color:orange"></i>
```

![スクリーンショット 2022-04-28 11.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/1c2547e8-e929-7c97-e589-d9a9feacf534.png)

#### スペースを作る

iタグのclassに`fa-fw`を追加することで左右にちょっとしたスペースを作ることができます。

```html
<i class="fab fa-twitter fa-fw"></i>
```

#### 回転させる

iタグのclassに`fa-spin`を追加することでアイコンを回転させることができます。

```html
<i class="fab fa-twitter fa-spin"></i>
```

#### 角度を変える

iタグのclassに`fa-rotate-○○`を追加することでアイコンの角度を変えることができます。

```html
<!-- 90度 -->
<i class="fab fa-twitter fa-rotate-90"></i>
<!-- 180度 -->
<i class="fab fa-twitter fa-rotate-180"></i>
<!-- 270度 -->
<i class="fab fa-twitter fa-rotate-270"></i>
```
![スクリーンショット 2022-04-28 11.12.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/6eb379cf-ceb3-e9f5-b1e5-acc941cd9b35.png)

#### 反転させる

iタグのclassに`fa-flip-○○`を追加することでアイコンを反転させることができます。

```html
<!-- 指定なし -->
<i class="fab fa-twitter"></i>
<!-- 水平方向反転 -->
<i class="fab fa-twitter fa-flip-horizontal"></i>
<!-- 垂直方向反転 -->
<i class="fab fa-twitter fa-flip-vertical"></i>
```
![スクリーンショット 2022-04-28 11.17.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/31b44110-5d4e-933e-aee0-143f3f4fa1f3.png)

#### アイコンを線で囲む

iタグのclassに`fa-border`を追加することでアイコンを線で囲むことができます。

```html
<i class="fab fa-twitter fa-border"></i>
```
![スクリーンショット 2022-04-28 11.20.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/a319989f-63dd-c728-5e8d-ca49d99fd250.png)

#### アイコンを重ねる

アイコンを重ねて表示することもできます。
手順としては、以下のようになります。
①class名が`fa-stack`のspanタグの中に、２つのアイコンを入れる
②背面のアイコンをはじめに書き、class名に`fa-stack-2x`を追加
③次に前面のアイコンを書き、class名に`fa-stack-1x`を追加

```html
<span class="fa-stack">
  <i class="fa-solid fa-heart fa-stack-2x"></i>
  <i class="fab fa-twitter my-skyblue fa-stack-1x"></i>
</span>
```
![スクリーンショット 2022-04-28 11.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600899/13dacc93-a018-5151-c8f5-5b992309425b.png)

## 終わりに
今回はこの辺で終わりにしときます。
今後使用する技術等があれば追記していこうと思います。
ご指摘・コメントお待ちしています。
ありがとうございました。

### 参考
https://saruwakakun.com/html-css/basic/font-awesome