Qiita の記事にアイコンをつける

Qiitaの記事に、Font Awesome のタグを入れると手軽にアイコンを付けることができます

<i class="fa fa-home fa-2x"></i><i class="fa fa-hand-paper-o fa-2x"></i><i class="fa fa-smile-o fa-2x"></i><i class="fa fa-heart fa-2x"></i><i class="fa fa-plane fa-2x"></i><i class="fa fa-phone fa-2x"></i><i class="fa fa-car fa-2x"></i>

Font Awesome, the iconic font and CSS toolkit
http://fontawesome.io/

## タグの入れ方

書式

```
<i class="fa %%アイコン%% %%オプション%%"></i>
```

例えば、記事に以下のタグを入れると、猫の手<i class="fa fa-paw fa-fw"></i>のアイコンになります

```<i class="fa fa-paw fa-fw"></i>```

※fa-fwは固定幅で表示するオプションです

## 利用可能なアイコン

利用可能なアイコンは以下のURLでご確認ください
http://fontawesome.io/icons/

## オプション

利用可能なオプションは公式サイトのexamplesに書かれています
http://fontawesome.io/examples/

### アイコンのサイズを変更する

<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x

```html
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
```

### アイコンを回転させる

<i class="fa fa-refresh fa-pulse fa-3x"></i> <i class="fa fa-spinner fa-spin fa-3x"></i> <i class="fa fa-cog fa-spin fa-3x"></i> <i class="fa fa-circle-o-notch fa-pulse fa-3x"></i> 

```html
<i class="fa fa-refresh fa-pulse fa-3x"></i>
<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa circle-o-notch fa-spin fa-3x"></i>
```

* fa-spin 滑らかに回転します
* fa-pulse 8段階で回転する




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

重ねたいアイコンをfa-stackクラスのタグに入れます。必要に応じてサイズを変更してください

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span>

```html
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
```
※ Qiitaの記事では改行せずに記述してください

# 自分のサイトでアイコンを使えるようにする

Font Awesomeのサイトにアクセスして[Download]のボタンをクリックします

http://fontawesome.io/

ダウンロードしたzipファイルをHTTPサーバーのDocumentRootディレクトリに展開します

実行例 (DocumentRootが/var/www/htdocsの場合)

```
# cd /var/www/htdocs
# unzip ~/font-awesome-4.6.3.zip 
Archive:  /root/font-awesome-4.6.3.zip
   creating: font-awesome-4.6.3/
   creating: font-awesome-4.6.3/css/
  inflating: font-awesome-4.6.3/css/font-awesome.css  
  inflating: font-awesome-4.6.3/css/font-awesome.min.css  
   creating: font-awesome-4.6.3/fonts/
      :
```

FontAwesomeのバージョンにより、ディレクトリ名が変わります。適宜読み替えてください

HTMLのhead内にfont-awesomeのCSSをリンク付けします

```html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<title></title>
</head>
<body>
<h1>アイコン表示テスト</h1>
<i class="fa fa-bomb fa-3x"></i>
</body>
</html>
```

実行イメージ

![image](https://qiita-image-store.s3.amazonaws.com/0/61404/59e91ba2-96c0-74b1-d593-aef4360ac64d.png)

## FontAwesomeのライセンスについて

FontAwesomeのライセンスは以下のURLにある通り、オープンソースでGPLフレンドリーになっているので自由に使えます。

http://fontawesome.io/license/

ただし、企業のアイコンについてはそれぞれの会社が権利を持ってますので注意が必要です。twitterのアイコンはtweetのリンクに使うなど、その会社の製品やサービスの参照先として使うに留めておいた方が良いでしょう