こんにちは！ぐちです。

アイコン

Font Awesomeとは従来画像で表現していたアイコンをフォントで代替できる優れたライブラリです。頻繁にバージョンアップが行われておりその都度新しいアイコンが追加されています。現在(2015/9/17)の最新版のv4.4.0ではなんと585個ものアイコンを使用することができます。

アイコンの一覧は公式ページからどうぞ。

Font Awesomeの強み？

フォントで表現しているアイコンなので大きさや色などの変更も自由自在です。もちろん重ね合わせたり回転させたりも可能です。解像度や画面の大きさに複数種類のアイコン画像を準備しなくて済みます。そして何より使い方が簡単なのです！

Onsen UIには同梱されていますしFont Awesome単体でも使うことができます。

Apache Cordovaで使う

下記のように記述するだけ指定したアイコンが表示されます。

<ons-icon icon="fa-angle-left"></ons-icon>

fa-angle-leftの部分を前述したアイコンページで見つけたアイコン名に変更するだけです。サイト上では「fa-」がないパターンの名前ですので「angle-left」の部分を変更する形になります。

Webサイトで使う

こちらも非常に簡単で下記のようにCDNからCSSを読み込むだけです。

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

実際に表示する場所では下記のように<i>タグを使用します。

<i class="fa fa-angle-left"></i>

上記の方法でデフォルトの大きや色で表示されますが下記のように標準でクラスが用意されており表示を変更することもできます。

大きく表示する

fa-lgやfa-2xなど大きさを指定するクラスが用意されているので下記のように記述するだけです。

<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

枠付きで表示する

アイコンの周りに枠線をつけて表示することもできます。

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

回転させて表示する

アイコンを回転させることも可能です。回転の種類は2種類ありfa-spinとfa-pulseがあります。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

重ねて表示する

下記のようにすることで複数のアイコンを重ねて表示することも可能です。

<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>

上記でご紹介した使用例は本家のサイトに実際の動きと合わせて紹介されているのでご参考頂ければと思います。