アナタはもう知っていますか？

今日ご紹介する【Font Awesome】は、全519種類（※Version.4.3現在）のアイコンがセットになっている究極のアイコンフォント。

アイコンフォントはこの【Font Awesome】さえあれば、他は何も要らないんじゃないかと思うほどの膨大な量のデータが収録されています。

早速、公式サイトからデータをダウンロードしてきましょう。

【Font Awesome】：公式配布サイト

ダウンロードしてきたZIPファイルを解凍すると「css」「fonts」「less」「scss」というフォルダに展開されます。
このうち、ウェブで使うのは以下の6つのファイル。

  • font-awesome.min.css
  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff
  • fontawesome-webfont.woff2

「fonts」というフォルダには他に「FontAwesome.otf」という名のオープンタイプ・フォントも収録されていますが、これは主にOSにインストールして使うタイプのものです。

フォントをウェブサイトに組み込む方法

さて。
スタイルシートの［font-awesome.min.css］は任意の場所にアップロードするとして、他のフォントファイル一式は「fonts」というフォルダに入れたまま、まとめてアップロードしておいたほうが、その後の設定がラクになります。

以下のようにしてHTMLファイルの <head>〜</head>内で［font-awesome.min.css］を読み込みます。

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

［font-awesome.min.css］の中で「@font-face」を指定している箇所があるので、フォントのファイルへのパスが間違ってないか確認しましょう。
通常は以下のように記載されているはずです。

@font-face {
font-family: 'FontAwesome';
src:	url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src:	url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
	url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
	url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
	url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
	url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

「url...」で指定されているパスをそれぞれのフォントのファイルに向くように書き換えます。

Sass もしくは Less での利用

ダウンロードしたスタイルシートには［Sass版］と［LESS版］の２種類も同胞されています。
Sass は SCSS形式で［font-awesome.scss］というファイル、LESS は［font-awesome.less］というファイルで、それぞれ必要ファイルが import されて構成されています。そのため、使わないコンポーネントがあれば font-awesome.xxxx ファイルから使わないコンポーネントをコメントアウトなりして読み込まないようにするだけで、必要最低限のみの構成で利用することも可能です。

Font Awesome を表示させる。

とりあえず、以上で【Font Awesome】を使う準備は完了。

あとはHTML上で、アイコンを表示させたい要素に定められたクラス名を付与していくだけです。
そのクラス名を調べる最も簡単な方法は、【Font Awesome】の公式サイトで使いたいアイコンをクリックして、その先のページで表示される HTML をコピペして利用する方法です。

実際のHTMLコードは以下のようになります。

<ul>
<li class="fa fa-mars"><span>mars</span></li>
<li class="fa fa-venus"><span>venus</span></li>
</ul>

以下、実際に【Font Awesome】を表示させたサンプルサイトを作ったので合わせてご覧ください。

【Font Awesome】：オンズによるサンプル

アイコンのサイズを変えたいときは、あらかじめ定義されているクラス名 fa-lg fa-2x fa-3x fa-4x fa-5x を追加すると便利です。

また、アイコンによってそれぞれの幅が違うため、リストやリンクボタンなどで利用すると、テキスト部分がズレて表示されてしまいます。その問題を解消するために、アイコンを表示している部分に統一の幅を持たせるための「fa-fw」というクラス名も用意されています。

アイコンを回転させたいときは fa-spin が使えます。
細かいところまで手が行き届いていますね。

他にも様々なオプションを設定することができますが、詳しくは公式サイトをご覧ください。

【Font Awesome】：公式配布サイト