HTML、CSS番外編②～Webアイコンフォント、Font Awesomeを使ってみよう‼～

#超便利なFont Awesomeを使って、Webアイコンフォントを手に入れよう
今回はWebページ内にアイコンを導入するやり方を紹介していきます:relaxed:
**Font Awesome**というサービスを使って、簡単にWebアイコンフォントが手に入ります:point_up_tone2:
Font Awesomeの導入方法から、アイコンの編集の仕方も紹介していきます。

今回の記事:arrow_down:

- Webアイコンフォントって何？
- Font Awesome導入方法
- アイコンを編集してみよう
    - アイコンの大きさを変える
    - アイコンの色を変える
    - アイコンと文字の間にスペースを作る
    - 回転させる（アニメーション）
    


#Webアイコンフォントって何？
**Webアイコンフォント**とは**フォントとして使用することができるアイコン素材**です。
よくWebページなどで目に付くアイコンはTwitterやInstagramなどのSNSのアイコンがありますね:grinning:アイコンはWebページをデザインうえで欠かせないものなのです:bangbang:
<img width="259" alt="SNS.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/d7f934c7-1078-125e-79e4-af0e1c95e2ec.png">


アイコンフォントを使用するメリットとしては、CSSで大きさや色が変えられたり、ファイルサイズも小さいので、ファイルサイズを抑えることができます。:point_down_tone2:


#Font Awesome導入方法
そんなWebアイコンフォントを導入するには、いつくかサービスはありますが、**Font Awesome**がおすすめです:heart_exclamation:
ここでは**Font Awesome**の使い方を紹介していきます。導入方法は簡単で、アイコンの種類もたくさんあります。

まず以下のコードをHTMLの＜head＞内に書きます。

```html:HTMLの＜head＞内
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
```


[Font Awesome](https://fontawesome.com/):point_down_tone2:
<img width="946" alt="FontAwesome.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/83f3f90a-851d-052b-241f-a781a528948e.png">


Font Awesomeのサイトに行き、使いたいアイコンを選びます:point_down_tone2:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/82a7faf2-56f9-3956-575e-c7e5a523b762.png)

使いたいアイコンをクリックし、Start Using This Iconをクリック:point_down_tone2:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/cc58cdfb-d323-51d5-63f6-5f21bdf95dcf.png)

HTMLコードをコピーして、貼り付ければ導入完了です:point_down_tone2:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/fd227aa1-b684-5d62-0e71-3e76e4cdb185.png)


※最近の新しいバージョンはメールアドレスを登録して使えるようになっています。

登録する場合はStart for Free:point_down_tone2:
<img width="943" alt="startfree.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/141b2dea-3c64-8674-c010-e69bb3b30ba7.png">

メールアドレスを入力し、Create & Use This kitをクリック:point_down_tone2:
<img width="941" alt="メールアドレス.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/0765b463-f8e8-089c-f6ff-b289349b0491.png">

以下のようなメールが届くので、Click To Confirm Your Email Address + Set Thisgs upをクリックし、設定します:point_down_tone2:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/5d26c795-8ca6-4392-19de-671412e72ce6.png)

会員登録を無事完了するとKit CodeというものがCopyできるので、それをHTMLの＜head＞内に埋め込みましょう:exclamation:
後は先程と同じように導入したいアイコンを選択して入れます。


#アイコンを編集してみよう
アイコンの導入が完了しました!!導入しただけのアイコンは、小さく、色は黒です。
大きさを変えたり、CSSを使ってよりおしゃれなアイコンにしてみましょう:heart_eyes:

####アイコンの大きさを変える
FontAwesomeでは、アイコンの大きさを簡単に変えられます。

今回はこのアイコンを使用していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/3b7ac43e-f58e-96d0-e7ea-bba8594dd219.png)

```html:使用するアイコンHTML
    <p><i class="fab fa-apple"></i></p>
```

上記のコードのi class="〜"内に書くことでサイズを大きくすることができます。

```html:アイコン2倍HTML
    <p><i class="fab fa-apple fa-2x"></i></p>
```

**サイズ表**

- fa-xs：0.75倍
- fa-lg：1.33倍
- fa-2x：2倍
- fa-3x：3倍
- fa-4x：5倍
- fa-5x：7倍

全部のサイズ感はこんな感じです:point_down_tone2:
<img width="334" alt="apple.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/e93051cb-8487-cc21-6f2b-e6eb0d550315.png">

自分のページのバランスなどを考えるといいですね！
もちろんCSSでも調整可能です。

####アイコンの色を変える
次は色を変えていきましょう。CSSを使っていきますのでクラスを追加しましょう。
使用するアイコンは引き続きリンゴです。赤いリンゴと、青いリンゴを作ってみます。


```html:使用するアイコンHTML
    <p><i class="fab fa-apple fa-3x"></i></p>
    <p><i class="fab fa-apple fa-3x"></i></p>
```

ここにクラス名以下とし、追加します。
クラス名:red_apple 赤いリンゴ
クラス名:blue_apple 青いリンゴ


```html:クラス名追加HTML
    <p><i class="fab fa-apple fa-3x red_apple"></i></p>
    <p><i class="fab fa-apple fa-3x blue_apple"></i></p>
```

```css:CSS
.red_apple{
    color: red;
}
.blue_apple{
    color: blue;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/f50d790b-fc62-81e0-f1c2-6d5b2194ca48.png)

色が付けられました。SNSのマークなどは、そのままの色を再現するとわかりやすいです。

####アイコンと文字の間にスペースを作る
アイコンと文字の間にスペースがないと、詰まって見えてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/02ff8062-2fab-493b-90d0-37267474ffe4.png)

```html:HTML
    <p><i class="fas fa-home"></i>HOME</p>
    <p><i class="fas fa-bars"></i>MENU</p>
    <p><i class="fas fa-cog"></i>SETTINGS</p>
```

こちらも簡単にスペースを追加できますので、ぜひ参考にしてみてください。
**fa-fw**という名前のclassをiタグに追加だけで、前後にちょっとした余白が作られます。

```html:HTML
    <p><i class="fas fa-home fa-fw"></i>HOME</p>
    <p><i class="fas fa-bars fa-fw"></i>MENU</p>
    <p><i class="fas fa-cog fa-fw"></i>SETTINGS</p>
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/ca44208b-b866-4b5a-669c-92c8ce20221c.png)

少し余白が入り、違和感がなくなりましたね。

####回転させる（アニメーション）
何と簡単に回転させることなんかも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/fb00a28d-6b22-35fc-e1f3-a669fd553adb.png)

```html:使用するアイコンHTML
    <i class="fas fa-fan"></i>
    <i class="fas fa-question-circle"></i>
```

**fa-spin**というclass名を追加するだけでアイコンをくるくると回すことができます。実際に見てみましょう。

```html:回転HTML
    <i class="fas fa-fan fa-spin"></i>
    <i class="fas fa-question-circle fa-spin"></i>
```
![GIF 2020-05-17 11-13-02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c9da5c56-d3e8-069d-cbaa-a785c6745a13.gif)

便利なのでぜひFont Awesome使ってみてくださいね:kissing_heart: