Font-Awesomeを使ってサイトにアイコンを表示させる + Animate.css + wow.js


# 初めに
前回の記事ではAnimate.cssとwow.jsを使ってサイトにアニメーションを加えました。
[Animate.cssとwow.jsを使ってサイトにアニメーションをつける](http://qiita.com/tiwu_official/items/989834406c25deccee8b)
今回はFont-Awesomeを使ってサイトにアイコンを表示させたいと思います。


自身のサイトでは、GitHubやTwitterのアイコンにFont-Awesomeを利用しています。
さらにAnimate.css、wow.jsを使ってアニメーションをアイコンに適用しています。
[tiwuofficial.github.io](http://tiwuofficial.github.io/)

# 1.準備

## Font-Awesome

Font-Awesomeは500種類を超えるアイコンをwebフォントとして表示できるフォントセットです。
画像ではなく、フォントのためCSSを利用しサイズ、配色を容易に変更できます。

・[公式サイト](http://fortawesome.github.io/Font-Awesome/)

Font-AwesomeはCDNサーバ上にあるため、フォントファイルをダウンロードする必要はありません。
もし、ダウンロードして自身のサーバ上に設置したい場合は公式サイトからダウンロードしてください。

# 2.使い方

## ファイルの読み込み

CDNサーバー上のFont-Awesomeを利用する場合下記の方法で読み込みます。

```HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
```

フォントファイルをダウンロードして利用する場合、ダウンロードしたzipファイルの中の
fontフォルダとcssフォルダをサーバーに設置し下記の方法で読み込みます。

```HTML
<link rel="stylesheet" href="css/font-awesome.min.css">
```

hrefのパスは配置した位置に合わせて変えてください。

特に理由がないのであれば、CDNサーバーからファイルを読み込む方法が良いと思います。


## 利用方法

アイコンの表示の方法はとても簡単で、公式サイトのアイコン一覧から好きなアイコンをクリックします。
[アイコン一覧](http://fortawesome.github.io/Font-Awesome/icons/)
アイコンのページに行くと

```HTML
<i class="fa fa-amazon"></i>
```

のようにソースがあるのでコピーして貼り付けるだけでアイコンが表示できます（例はAmazonのアイコン）


## オプション

### サイズの変更

classにfa-lg fa-2x fa-3x fa-4x 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
```

### アイコンの表示幅の統一

アイコンによって幅、余白がばらばらなため、テキストの開始位置がアイコンによってずれます。
そこで、アイコンの表示幅を統一させるためにclassにfa-fwを指定します。

```HTML
<i class="fa fa-home fa-fw"></i>Home
<i class="fa fa-book fa-fw"></i>Library
<i class="fa fa-pencil fa-fw"></i>Applications
<i class="fa fa-cog fa-fw"></i>Settings
```

### リストによる利用
アイコンをリストで利用する場合はulのclassにfa-ulを指定し、liのclassにfa-liを指定します。

```HTML
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
```

### ボーダーで囲む
アイコンをボーダで囲むにはclassにfa-borderを指定します。

```HTML
<i class="fa fa-quote-left fa-border"></i> border
```

### 回り込み
classにpull-leftとpull-rightを指定することで回りこみを実現できます。

```HTML
<i class="fa fa-quote-left fa-pull-left"></i> sample text
```

### 回転
classにfa-spinを指定することでアイコンが回転します。また、fa-pulseを指定することで1周を8分割して回転します。

 ```HTML
 <i class="fa fa-spinner fa-spin"></i> fa-spin
 <i class="fa fa-spinner fa-pulse"></i> fa-pulse
 ```
 
### 角度
classにfa-rotate-xを指定することでアイコンの角度を変えられます(90度,180度,270度)
また、fa-flip-xを指定することで反転させることが可能です。

```HTML
<i class="fa fa-shield"></i> normal
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
```

### アイコンの組み合わせ

さらに、複数のアイコンを重ねて表示することも可能です。

```HTML
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
```
親classにfa-stackを指定し、fa-stack-1xを指定したアイコンが前面に、fa-stack-2xを指定したアイコンが背面にきます。

### Animate.cssとwow.jsとの組み合わせ
Animate.cssとwow.jsを組み合わせることでアイコンにアニメーションをつけることができます。

```HTML
<i class="fa fa-github-square wow bounceIn" data-wow-delay="0.3s" data-wow-duration="1s"></i>
```

上記例ではスクロールがアイコンの位置に達したら、0.3秒後に1秒かけてアイコンがバウンスインアニメーションで表示されます。


# 3.最後に
このように複数のcssやJavaScriptを組み合わせることで一味違うサイトが構築できると思います。