FontAwesomeはWebフォントにより実現されたアイコン群です。
統一感のある質の高いデザインで、これらを組み込むだけで自分の作っているアプリやサイトがなんだかお洒落になった気分に浸れます。
Font Awsomeには2015年11月現在、585種類のアイコンもあり、ソフトウェアでよく使う機能を示すアイコンは大体そろっています。
アイコン一覧
導入方法
普通にダウンロードして、自分のサイトにアップするという方法もありますが、Font Awesomeは最近流行のCDN(Content Delivery Network)方式にも対応していて下記のコードをheadタグ内に書くだけで簡単に始められます。
[html]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
[/html]
一般的な使い方
こんな感じでiタグに対し、「fa」と「fa-〇〇〇」のクラスを指定します。
[html]
<i class="fa fa-star"></i>
[/html]
[html]
<i class="fa fa-taxi"></i>
[/html]
もちろんフォントなので、カラーやサイズも変えられます。
[html]
<i class="fa fa-calendar"></i>
<i class="fa fa-calendar" style="color:red;font-size:2.0em"></i>
[/html]
アニメーション
アイコンが回転するアニメーションさせることもできます。
やり方は「fa-spin」というクラスを追加するだけです。
[html]
<i class="fa fa-refresh"></i>
<i class="fa fa-refresh fa-spin"></i>
[/html]
ローディング時のアニメーションに使いやすく、ajax呼び出し前にfa-spinをaddClassし、サーバーから返ってきたらremoveClassすれば簡単に実現できます。
回転
回転させるときは「fa-rotate-(角度)」を付与します。角度は90度単位です。
[html]
<i class="fa fa-floppy-o"></i>
<i class="fa fa-floppy-o fa-rotate-90"></i>
[/html]
反転
左右や上下に反転させるときは、「fa-flip-horizontal」と「fa-flip-vertical」を使います。
[html]
<i class="fa fa-hand-paper-o "></i>
<i class="fa fa-hand-paper-o fa-flip-horizontal"></i>
<i class="fa fa-hand-paper-o fa-flip-vertical"></i>
[/html]
重ね合わせる
アイコンを重ね合わせることもできます。
外側の要素に対して「fa-stack」を設定し、内部に重ねたいi要素を並べます。
普通の大きさで表示するi要素には「fa-stack-1x」、大き目に表示するi要素には「fa-stack-2x」を指定します。
[html]
<span class="fa-stack">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red"></i>
</span>
[/html]
このように多様なアイコンと機能を持ち合わせたFont Awesomeです。
是非、貴方のWebデザインにお役立てください！
