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

初めに

前回の記事ではAnimate.cssとwow.jsを使ってサイトにアニメーションを加えました。
Animate.cssとwow.jsを使ってサイトにアニメーションをつける
今回はFont-Awesomeを使ってサイトにアイコンを表示させたいと思います。

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

1.準備

Font-Awesome

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

・公式サイト

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

2.使い方

ファイルの読み込み

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

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

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

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

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

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

利用方法

アイコンの表示の方法はとても簡単で、公式サイトのアイコン一覧から好きなアイコンをクリックします。
アイコン一覧
アイコンのページに行くと

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

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

オプション

サイズの変更

classにfa-lg fa-2x fa-3x fa-4x fa-5xを指定することでサイズを変更できます。

<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を指定します。

<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を指定します。

<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を指定します。

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

回り込み

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

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

回転

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

<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を指定することで反転させることが可能です。

<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

アイコンの組み合わせ

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

<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を組み合わせることでアイコンにアニメーションをつけることができます。

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

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

3.最後に

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