Font Awesome

## 参考

* Font Awesomeの使い方：Webアイコンフォントを使おう: https://saruwakakun.com/html-css/basic/font-awesome
* Font Awesome 5 の基本的な使い方: http://www.webdesignleaves.com/pr/plugins/fontawesome\_01.html
* Font Awesomeの公式ドキュメント: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

HTML5コード

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

HTML5コード

```
<i class="fab fa-android"></i>
```

HTML5コード

```
<i class="fab fa-apple"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-lg"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-xs"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-sm"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-1x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-2x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-3x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-4x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-5x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-6x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-7x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-8x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-9x"></i>
```

HTML5コード

```
<i class="fas fa-address-card fa-10x"></i>
```

HTML5コード

```
<i style="color: gray;" class="fas fa-tag"></i>
<i style="color: skyblue;" class="fas fa-tag"></i>
<i style="color: #fecb81;" class="fas fa-tag"></i>
```

 Font Awesome

 Firefox

 Github

HTML5コード

```
<p style="color: #495057;; font-size: 20px;"><i class="fab fa-font-awesome"></i> Font Awesome</p>
<p style="color: orange; font-size: 20px;"><i class="fab fa-firefox"></i> Firefox</p>
<p style="color: black; font-size: 20px;"><i class="fab fa-github"></i> Github</p>
```

HTML5コード

```
<i class="fas fa-address-book fa-3x"></i>
<i class="fas fa-bolt fa-3x"></i>
<i class="fas fa-bookmark fa-3x"></i>
<i class="fas fa-check fa-3x"></i>
<i class="fas fa-cog fa-3x"></i>

HTML5コード

```
<i class="fas fa-address-book fa-3x fa-fw"></i>
<i class="fas fa-bolt fa-3x fa-fw"></i>
<i class="fas fa-bookmark fa-3x fa-fw"></i>
<i class="fas fa-check fa-3x fa-fw"></i>
<i class="fas fa-cog fa-3x fa-fw"></i>

HTML5コード

```
<i class="fas fa-address-book fa-3x fa-spin"></i>
<i class="fas fa-bolt fa-3x fa-spin"></i>
<i class="fas fa-bookmark fa-3x fa-spin"></i>
<i class="fas fa-check fa-3x fa-spin"></i>
<i class="fas fa-cog fa-spin fa-3x"></i>

HTML5コード

```
<i class="fas fa-address-book fa-3x fa-spin fa-fw"></i>
<i class="fas fa-bolt fa-3x fa-spin fa-fw"></i>
<i class="fas fa-bookmark fa-3x fa-spin fa-fw"></i>
<i class="fas fa-check fa-3x fa-spin fa-fw"></i>
<i class="fas fa-cog fa-spin fa-3x fa-fw"></i>

HTML5コード

```
<i class="fas fa-air-freshener fa-3x"></i>
<i class="fas fa-air-freshener fa-3x fa-rotate-90"></i>
<i class="fas fa-air-freshener fa-3x fa-rotate-180"></i>
<i class="fas fa-air-freshener fa-3x fa-rotate-270"></i>

指定なし
水平方向に反転
垂直方向に反転

HTML5コード

```
<i class="fab fa-amazon-pay fa-3x"></i>指定なし
<i class="fab fa-amazon-pay fa-3x fa-flip-horizontal"></i>水平方向に反転
<i class="fab fa-amazon-pay fa-3x fa-flip-vertical"></i>垂直方向に反転

HTML5コード

```
<i class="fas fa-tasks fa-2x"></i>
<i class="fas fa-tasks fa-3x"></i>
<i class="fas fa-tasks fa-2x fa-border"></i>
<i class="fas fa-tasks fa-3x fa-border"></i>
```

HTML5コード

```
<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x" style="color: white"></i>
</span>
<span class="fa-stack">
<i class="fas fa-square-full fa-stack-2x"></i>
<i class="fas fa-dove fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="far fa-square fa-stack-2x"></i>
<i class="fab fa-firefox fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x" style="color:#F1840A">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-firefox fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fas fa-circle-notch fa-stack-2x" style="color: #EE7B7D"></i>
<i class="fas fa-globe fa-stack-1x" style="color: #4865B6"></i>
</span>
```