Font Awesomeとは? 豊富な絵文字が詰まったアイコンフォント

Font Awesome」とは、ウェブ上で使えるアイコン(絵文字)を、画像ではなくテキストとして表示できるアイコンフォントです。CSS3のWebフォント機能を使えば、ウェブページ上に自由なサイズ&好きな色で、簡単に豊富なアイコンを表示できます。

豊富な絵文字をアイコンフォントとして提供してくれるFont Awesome

豊富な絵文字をアイコンフォントとして提供してくれるFont Awesome


収録アイコン(絵文字)は670種類以上!
このFont Awesomeで提供されているアイコンフォントファイルには、670種類を越えるアイコンが収録されており、とても簡単な記述でウェブ上に表示できます。下図は、使えるアイコンのほんの一例です。

 
Font Awesomeに含まれるアイコン(絵文字)の例。アイコンフォントとして用意されているので、色も大きさも自由自在。

Font Awesomeに含まれるアイコン(絵文字)の例。アイコンフォントとして用意されているので、色も大きさも自由自在。


上図のようなアイコンすべてが、Font Awesomeを読み込んでおくだけで表示できるようになります。


 

Webフォントとは? フォントファイルごとダウンロードする仕組み

フォントファイルをダウンロードして表示に使用

表示に使うフォントファイル自体もウェブサーバからダウンロードする仕組み (※白抜き影付きのフォントをダウンロードさせて文字を表示した例)

Webフォントとは、ウェブサーバ上に置かれたフォントファイルをダウンロードして文字の表示に使うCSS3の機能です。閲覧者の環境にあらかじめフォントがインストールされている必要がないため、確実に望みのフォントで表示できるメリットがあります。

※Webフォントに関して詳しくは、記事「望みのフォントで表示できる!ウェブフォントの使い方」をご覧下さい。

Font Awesomeは、「多数のアイコンデータを収録したフォントファイル」をWebフォントとしてブラウザにダウンロードすることで、望みのアイコンを表示する仕組みです。


 

アイコンをWebフォントで表示できる利点とは

このFont Awesomeは、ただのアイコン画像集ではありません。CSS3のWebフォント機能を使って表示できるアイコンフォントだという点が大きなメリットです。フォントなので、すべてのアイコンは一般の文字と同様にテキスト(文字)としてウェブ上に掲載できます。そのため、下記に挙げるメリットが得られます。

アイコンフォントだから、拡大・縮小が綺麗で配色も自由
文字なので拡大・縮小が綺麗で、表示色・背景色も自由自在

文字なので拡大・縮小が綺麗で、表示色・背景色も自由自在

すべてのアイコンはテキストとして表示されますから、CSSを使って拡大・縮小が綺麗にできます。どれだけ拡大してもシャギーが目立つことはありません。

また、一般の文字と同様に文字色・背景色を指定するだけでアイコンに自由な色を付加できます。図はFont Awesomeで提供されているアイコンに赤や緑などの色を付加してみた例です。

ウェブページ上にアイコンを表示する上で、これらの2つの仕様はとても便利です。


 
アイコンフォントだから、装飾に手間がかからず変更も容易
アイコンがあると分かりやすい

アイコンがあると分かりやすい

アイコンの存在は、ナビゲーションやボタンの分かりやすさを向上させるために有用です。しかし、アイコンを画像で用意すると、色や大きさの変更に手間がかかるデメリットがあります。

Font Awesomeならアイコンはフォントとして用意されているため、CSSを使って簡単に装飾できます。アイコンを画像で用意した場合のような手間はかかりません。


 
Bootstrapなどのフレームワークと組み合わせて使うこともできる
Twitter Bootstrapと一緒に使ってボタンのアイコンにもできる

Bootstrapと一緒に使ってボタンのアイコンにもできる

Font Awesomeのアイコンは、Bootstrapと組み合わせて使うこともできます。Bootstrapとは、ウェブ上で見やすいデザインやインターフェイスを簡単に作れるフレームワークです。例えば図のように組み合わせて表示できます。

※Font Awesomeの利用にBootstrapは必須ではありません。単体のWebフォントとして使えます。


 

Font Awesomeは、わざわざ設置しなくてもCDN経由で読み込める

自サイトへの設置作業は不要

自サイトへの設置作業は不要

Font AwesomeはCDNサーバでも提供されているため、たった1行のlink要素をHTMLに追記するだけで使えます。わざわざアイコンフォントをダウンロードして自サイト上に設置する必要はありません。とても楽で簡単に使えます。

※どうしても自サイト上に設置したい場合は、アイコンフォントなどの構成ファイル一式をダウンロードして設置することもできます。


 
それでは、次のページからFont Awesomeの導入方法と使い方をご紹介いたします