【HTML】【CSS】Font Awesome

# Font Awesome
:sunny: アイコンが使用できる
:sunny: アイコンを文字として扱うことができるためCSSが使える

よくあるTwitterの
<img width="99" alt="スクリーンショット 2020-01-18 2.20.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/471503f6-22a9-e5cd-6a26-50da3778cf3c.png">
とか
Facebookの
<img width="101" alt="スクリーンショット 2020-01-18 2.21.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/fbc799a5-5f5f-2719-2286-31430ce81240.png">
とかのアイコン。

これ２つとも Font Awesome というアイコンばかりあるサイトから作成しました:smile:

## 使い方
いろいろ使い方はあるようですが、ダウンロードして使う方法をまとめます。

### Font Awesome にアクセスしてCSSファイルを読み込む。
[Font Awesome](https://fontawesome.com/) のトップ画面にアクセスする。
アクセスすると選択画面のようなものがでてきますが
無料で使いますか？それとも有料で使いますか？
ということです。
ひとまず無料を選びましょう:smile:
<img width="993" alt="スクリーンショット 2020-01-18 2.38.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/5b9f7d5c-b6ed-511b-68a9-25660bac0661.png">

少し画面を下に移動させると下記のような画面になります。
ダウンロードボタンをクリックします。
<img width="1080" alt="スクリーンショット 2020-01-18 2.43.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/89bcfb41-65fb-0f96-70e7-29be8faf2002.png">

Downloadボタンをクリックします。
<img width="799" alt="スクリーンショット 2020-01-18 2.47.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/3338682d-2c08-19e5-53a0-ad26b1825417.png">

ボタンを押すとダウンロードされるので任意の場所に保存します。
保存したら HTML の head 部分に以下のように記載します。

```例.html
  <head>
    <link rel="stylesheet" href="保存した場所のパス/fontawesome-free-5.12.0-web/css/all.css">
  </head>
```

個人PC名と個人フォルダ名が記載されているため少しふせますが、
私の場合は以下のようになります。

```例.html
  <head>
    <link rel="stylesheet" href="file:///Users/個人PC名/Desktop/個人フォルダ名/fontawesome-free-5.12.0-web/css/all.css">
  </head>
```

これで Font Awesome の CSSファイルを読み込む用意ができました:smile:

### 使用するアイコンのクラス名を指定してWebに反映させる
[Font Awesome](https://fontawesome.com/) のトップ画面にアクセスする。
トップ画面の上側に Icons をクリック。
<img width="927" alt="スクリーンショット 2020-01-18 3.31.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/dc967d21-4201-3288-629f-bfe793435df0.png">

いろんな種類のアイコンが表示されていますが検索窓で検索したほうが早いので検索窓で検索します。
今回は Twitter と検索します。
**日本語では検索できないので必ず英語で検索してください。**
<img width="1077" alt="スクリーンショット 2020-01-18 3.40.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/57150335-98d9-89c0-6177-d7c32e87ba44.png">

Twitter と検索すると以下の10個のアイコンが表示されました:smile:
色が濃いアイコンと薄いアイコンがあるかと思いますが

濃いアイコン → 無料
薄いアイコン → 有料

の違いです:sweat_smile: 
なので薄いアイコンを使いたいなと思ったらお金飛んでいきます:sweat_smile: 

今回は赤枠で囲んだアイコンを使用したいので赤枠のアイコンをクリックします。
<img width="867" alt="スクリーンショット 2020-01-18 3.45.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/ef26a99f-58d6-4b53-b7d3-f7be53c6f8e0.png">

アイコンボタンをクリックすると今度は大きなアイコンがあらわれるかと思います。
大きいアイコンの上にコードが書かれていると思います。
そのコードをクリックするとコードがコピーできるのでクリックします。
<img width="840" alt="スクリーンショット 2020-01-18 3.50.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/aee7a34e-4ab4-9b5c-56da-63322faf4506.png">

コピーしたら HTML にペーストするのですが
今度は head 部分に記入するのではなくて
body 部分に記入します。

head 部分はWeb上に表示されませんが
body 部分はWeb上に表示されます。
アイコンはWeb上に表示させたいため body 部分に記入します。

```例.html
  <body>
    <i class="fab fa-twitter-square"></i>
  </body>
```

で、ちゃんと読みこんで表示されてるかなぁとWebを確認してみると・・・
<img width="1101" alt="スクリーンショット 2020-01-18 4.02.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/43d2f2bb-0ea8-4827-d9bd-165ec1dce412.png">

ちっちゃ！:scream:
これではなんなのかわかんない:disappointed_relieved:
どうするのかといえば・・・最初に書いたようにアイコンを文字として扱える。
つまりCSSが使える:raised_hands:
CSSで大きくして、色も塗っちゃえ:laughing: 

```例.css
.fa-twitter-square {
  color: #00a1f2;
  font-size: 100px;
}
```

Web
↓
<img width="100" alt="スクリーンショット 2020-01-18 4.12.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/473e0996-293f-73a7-160b-f1e3ac39c4e9.png">

できた:laughing: 

### 注意事項
HTMLではクラス名を **fab fa-twitter-square** としていましたが
CSSでは fab を省いた **fa-twitter-square** としています。
fab fa-twitter-square と全部入力しちゃうとCSS反映しません:expressionless:
なぜなら fab というクラス名と fa-twitter-square のクラス名が２つあるからです。

なので

```例.css
.fa-twitter-square {
  color: #00a1f2;
  font-size: 100px;
}
```

とするか

```例.css
.fab {
  color: #00a1f2;
  font-size: 100px;
}
```

にする必要があります。

今回Twitterしかなかったのでどちらのクラス名でもいいのですが
もし下記のように複数ある場合

```例.html
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
```

クラス名を fab で指定すると

```例.css
.fab {
  font-size: 100px;
  color: #00a1f2;
}
```

Web
↓
<img width="194" alt="スクリーンショット 2020-01-18 4.49.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/21a9b993-b7c5-4ad8-1d88-dc48c122965c.png">

TwitterもFacebookも同じ色になっちゃいました:sweat_smile: 

ではCSSをこのように記入するとどうでしょうか。
fab クラスで大きさを揃えて
カラーだけそれぞれ違う色にします。

```例.css
.fab {
  font-size: 100px;
}

.fa-twitter-square {
  color: #00a1f2;
}

.fa-facebook-square {
  color: #3578E5;
}

```

Web
↓
<img width="195" alt="スクリーンショット 2020-01-18 4.55.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/ff1abe13-26fc-3690-67f6-82406be5475a.png">

ちゃんと反映されました:laughing: 

## おまけ
さきほどは Font Awesome のクラス名をそのままコピペしましたが、

```例.html
<span class="fab fa-twitter-square"></span>
```

span でも

```例.html
<div class="fab fa-twitter-square"></div>
```

div でも使用できます:smile: