【無料で利用できるWebアイコンフォント】Font Awesome を使ってみよう

ボタンの横にアイコンを配置することが多々ありますよね。
そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します！

【目次】

1. 概要
2. 事前準備
   1. ダウンロードして使う
   2. CDNを使う
3. 使い方
   1. 大きさを変える
   2. 色を変える
   3. 回転させる
   4. 重ねる
4. まとめ

概要

Font Awesome（フォントオーサム）はアイコンフォントやSVGを提供しているサービスです。
アイコンフォントは、アイコンをWebフォントで表現することができます。画像ではなくフォントなので、スタイルの変更がCSSで簡単にできます。
商業利用も可能で、無料版とプロ版があります。比較すると表のような感じです。

*KitによるCDNを使用している場合
参考先

無料版で十分かと思っていましたが、Kitを使用した場合は月間PV数がちょっとネックですね。
PV数（ページビュー数）とは、ユーザーがWebページを表示した回数のことです。この場合はページにFont AwesomeのKitによるが読み込まれているとカウントされます。

複数のページでFont Awesomeを使用しており大規模な利用が見込まれるサービスなら、プロ版を視野に入れた方がいいかもしれません。

Font Awesome

事前準備

Font Awesomeを使うには準備が必要なので、そこから説明していきます。
2通りあるのですが、どちらでも大丈夫です。個人的には最初に説明する「ダウンロードして使う」の方が楽かなと思います。

ダウンロードして使う

まず公式のダウンロードページに行きます。

「Free for Web」をクリックしてダウンロード。

ダウンロードしたフォルダの中にある「all.min.css」と「webfontsフォルダ」を任意の場所に設置してください。
設置する際、「all.min.css」と「webfontsフォルダ」のファイルの位置関係に注意してください。CSSは1つ階層が上のwebfontsフォルダのフォントを参照しています。ですので位置関係が崩れると表示されません。

CSSをHTMLで読み込みます。サンプルは、index.htmlと同じ階層にwebfontsフォルダとcssフォルダがあり、cssフォルダ内にall.min.cssが配置されている状態です。

これで準備完了です。

ここでも注意なのですが、Font Awesomeを表示させるときローカルサーバーまたはサーバー上でないと表示されないです。また、サーバーに上げるときは「webfontsフォルダ」の上げ忘れにも気を付けてください。（やりました）

CDNを使う

CDN（Content Delivery Network）とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。
大本のサーバーからデータをコピーして、複数のサーバーに置いておきます。ユーザーがデータを要求したら、ユーザーから近いサーバーがデータを送信します。この大本のサーバーと複数のサーバーの関係がCDNというわけです。

以前までCDNでCSSを読み込んでいました。現在はCDNを使うには、Kitを発行してそれによるJavaScriptを読み込むようになりました。
CDNのCSSの配信もアカウントを登録したら使えるみたいです。ユーザーメニューから「Font Awesome CDN」をクリックしたら、以前の形式で使うことができます。

Kitを発行されるにはアカウントを登録する必要があります。登録の方法から紹介していきます。

Font Awesomeのトップにある「Start for Free」をクリック。

メールアドレスを入力して「Create & Use This Kit」をクリック。

すると、このようなメールが届いているので「Click to Confirm Your Email Address + Set Things Up」をクリック。

パスワードの設定が求められるので、2回入力して「Set Password & Continue」をクリック。

個人情報の入力が求められますが、面倒ならボタン下の文章をクリックしてスキップしてください。

これでアカウント登録は完了です。

するとキットコードが割り振られ、そのJavaScriptを読み込めばFont Awesomeを使用することができるようになります。
kitで管理することで、バージョンなどが変わってもHTMLを変更する必要がないのが便利です。

使い方

では実際に使っていきましょう！アイコン検索の流れも説明しますね。

ヘッダーにある「Icons」をクリック。

次に無料版を使っている場合は、サイドにある「Free」をチェックしておきましょう。これで無料のアイコンのみ検索できます。

探したいアイコンを英語で入力しましょう。するとアイコンが絞り込めますので、使いたいアイコンをクリック。

アイコンの名前の下にiタグで書かれているものがあります。そこをクリックしたらコピーできます。HTMLの使いたい場所に貼り付けましょう。

このように表示されます。iタグでなく、疑似要素で表示させたい場合は

このようにすれば表示されます。プロパティの値は適宜変更してください。

公式は疑似要素で表示させるのは、あまり推奨はしていないみたいです。
Font Awesomeはインライン要素と使われることを想定しているようです。なので、ブロック要素の疑似要素で表示させるならdisplayプロパティでインライン要素に合わせたほうがいいのかもしれません。

また、iタグのクラスに追加するだけでスタイルが変更できるので、いくつか紹介します。

大きさを変える

クラスを追加することで簡単にサイズを変えることができます。

左から通常、2、3、5、7、9倍です。emで指定しているので親要素のfont-sizeが基準です。
もっと細かく指定したかったら、

のようにできます。アイコンの高さがfont-sizeで指定した値になります。

色を変える

colorを指定したら色が変わります。

角度をつける

fa-rotate-●でアイコンを回転させることができます。

左から通常、90、180、270度に回転していて、その次から水平方向、垂直方向、最後に水平、垂直方向に反転しています。

アイコンを重ねる

アイコンとアイコンを重ねることもできます。

この2つのアイコンを重ねてみましょう。
重ねたい2つのアイコンの親要素にfa-stackをクラスに追加し、下に来るアイコンにfa-stack-2xを、上に来るアイコンにfa-stack-1xをクラスに追加します。
さらに、上に来るアイコンにfa-inverseを指定するとアイコンの色が反転します。

まとめ

今回はアイコンフォントについて主に書きましたが、Font AwesomeはSVGも配布しているので興味がある人は調べてみてください。
Font Awesomeを使っていて感動したのは、ホバーしたときの挙動です！
画像なら、JavaScriptで操作して画像のパスを変えられます。しかし、アイコンは疑似要素で配置することが多くてJavaScriptでの操作は少し面倒です。それがFont Awesome だったら簡単に変えられるので良かったです。
いいなと思ったら、ぜひ使ってみてください。