3. クラス名を追加してアニメーションさせる
ここまでで、アニメーション用のフレームワークを読み込ませているので、あとはどんな動きをさせるかを指定すれば完了です。
さきほどダウンロードしたページの下の方を参照して下さい。
アイコンを動かすアニメーションのサンプルが表示されています。
ここからお好みのアニメーションを選んで該当のクラス名を<i>タグのクラスに追加し、前項と同じように設置します。
<i class="fa アイコン名 アニメーション名"></i>
「On DOM load」はページが読み込まれた段階で動きだし、
「On hover」はアイコンにオンマウスするとアニメーションします。
「On parent hover」は親要素（ダウンロードページの場合だとアイコン横のテキスト）にオンマウスしてもアニメーションします。
faa-fast や faa-slow のクラスによってアニメーションの速度も調整できるようです。
Adblock Plus がアイコンフォントをブロックする？
ここからは余談ですが、
広告をブロックする機能拡張「Adblock Plus」を導入している場合、フォントアイコンがブロックされて表示されない場合があるようです。
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their “Remove Social Media Buttons” setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you’ll need to modify the social icon class names.
Font Awesome – The Icons
参照したページではTwitter や Facebookなどのロゴを含む「Brand Icons」に限定した書き方をしていますが、ソーシャルシェア表示などで利用しているサイトやブログも多いはず…。
広告が表示されないことでサイト回覧が快適になる反面、デザイン性も欠く可能性があるなんて…。
ほんとブロガー泣かせなツールですねアドブロック…。
