Webフォントアイコン-Font Awesomeの使い方-

Webサイトでアイコンを表示したいとき、通常は画像を用意して表示させることが多いと思います。今回は画像ではなくテキストとしてアイコンを表示することができるFont Awesomeというフォントセットを利用した方法を紹介します。

Webフォントアイコンについて

Webフォントアイコンとは、CSS3の機能にあるWebフォントを利用して画像ではなくテキストとして表示させるアイコンのことです。Webフォントアイコンはテキストなので、拡大・縮小もきれいに表示され、スタイルシートで色も簡単に制御できるなどのメリットがあります。また、サイズや色の変更といったときも、いちいち画像編集ソフト等を使って作り変える手間も省けます。

Font Awesomeの使い方

Font Awesomeを利用する方法は、フォントファイルをダウンロードして自身のサーバーに設置して使うか、またはCDNサーバーを使用して表示させる方法があります。

自分のサーバーにアップロードして使う

自分の使っているサーバーにファイルをアップロードして使うのは、まずFont Awesomeのサイトからファイル一式をダウンロードします。

ファイルを解凍したら、いろいろなファイルが現れますが、特に理由がなければそのままのファイル構成でサーバーにアップしましょう。そうしたら、「font-awesome.min.css」をhead内で読み込ませます。これでWebフォントアイコンを使うことができます。

CDNサーバーを利用して使う

Font AwesomeはCDNサーバー上にあるフォントを読み込ませて使うこともできます。head内にlink要素を追加するだけで使用することができるので、とても簡単に利用できます。

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

実際にフォントを表示させるためには、それぞれのアイコンに用意されたclassを割り当てることで表示できます。自分のサーバーに設置する場合でもCDNサーバーを利用する場合でも同じです。例えば、ホームアイコンを表示させたい場合は以下のような記述をします。

<i class="fa fa-home"></i>home

アイコンを重ねて表示する

Font Awesomeのアイコンは、重ねて表示することも可能です。アイコンを重ねたい場合は「class=”fa-stack”」というクラスを付与した要素の中に重ねたいアイコンを記述します。重なり順は指定した順番で表示されていくので、後に指定したアイコンが上になって表示されます。また、「fa-stack-1x」というクラスをつけると通常サイズとなり、「fa-stack-2x」というクラスをつけると一回り大きいサイズで表示されます。

<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-search fa-stack-1x"></i>
</span>

アイコンを重ねた例

背景画像として表示する

Font Awesomeのアイコンを背景画像として表示させたい場合は、Unicodeを使って表示させます。

li:before {
  font-family: "FontAwesome";
  content: "¥f15c";
}

まず、フォントファミリーで「FontAwesome」と指定し、contentプロパティに表示させたいアイコンのUnicodeを指定します。このとき、先頭に￥マークを付け忘れないようにしてください。
要素の前につけたい場合は「:before」、要素の後ろにつけたい場合は「:after」といった疑似要素を使います。また、Unicodeは各アイコンの詳細ページに載っています。

このような感じでWebフォントアイコンを表示させることができます。他にもたくさんフォントが用意されているのでアイコン一覧から使えそうなアイコンを探してみてください。