Font Awesomeでかっこいいアイコンを表示する

セットアップ

Font Awesomeはbootstrap3用のjavascriptに依存しないアイコン集です。

以下の公式サイトに使い方の説明が書いてあります。

http://fontawesome.io/get-started/

BootstrapCDNを利用する方法が最も簡単らしく以下の一行を読み込むことで利用可能になります。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

cakephpの場合は、viewのlayoutファイルのhead内に上の一行を追記することになります。

使い方とアイコン一覧

使い方も簡単に利用できるようになっています。

<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>

上のように書くとカメラのアイコンが表示されます。そのほかのアイコンを利用する場合は以下のページで一覧を確認できます。

Font Awesome Icons
http://fontawesome.io/icons/

CakephpとFont Awesomeを利用した具体例

Cakephpを利用したAjaxメールフォームをエントリーしてあるので、Ajaxリクエストした際に表示される[通信中]の表示をFont Awesomeのアイコンで表現してみようと思います。

Ajaxメールフォームのエントリーはこちら

変更する箇所はView編の以下のコードになります。

//echo "<div id='sending' style='display:none;'>通信中です</div>";
echo "<div id='sending' style='display:none;'><i class='fa fa-refresh fa-spin'></i></div>";

コメントアウトした上の行は元の状態で、下がFont AwesomeのSpinning Iconを設定した例です。この設定により、Ajaxリクエスト中に[通信中です]という表示ではなく、Spinning Iconが表示されるようになります。