アイコンを画像ではなくテキストで表示できる「Font Awesome」

Font Awesome

Font Awesome

ウェブ上で使いやすい様々なアイコンを、画像ではなくテキスト(文字)として表示できる「Font Awesome」というフォントセットがあります。CSS3の「Webフォント」機能を使うことで、ウェブページ上に簡単にアイコンを表示できます。

下図のような、500種類を越えるアイコンがフォントとして用意されており、とても簡単な記述で表示できます。

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

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



 

画像ではなく、Webフォントを使った「テキスト(文字)」なので便利

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

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

この「Font Awesome」は、ただのアイコン画像集ではありません。CSS3の「Webフォント」機能を使って表示できる「テキスト(文字)」だという点が大きなメリットです。

フォントだから、拡大・縮小が綺麗で、配色も自由
テキスト(文字)ですから、CSS(スタイルシート)を使って拡大・縮小が綺麗にできます。また、文字色・背景色を指定するだけでアイコンに自由な色を付加できます。ウェブページ上にアイコンを表示する上で、この2点はとても便利です。


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

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

アイコンの存在は、ナビゲーションやボタンの分かりやすさを向上させるために有用です。しかし、アイコンを画像で用意すると、色や大きさの変更に手間がかかるデメリットがあります。「Font Awesome」なら、アイコンはフォントとして用意されているため、CSSを使って簡単に装飾でき、画像データで用意した場合のようなデメリットがありません。


 

Bootstrapと組み合わせて使うこともできる

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

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

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

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


 

フォントファイルごとダウンロードして表示に使う「Webフォント」機能

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

Webフォントは、HTMLと一緒にフォントファイルもダウンロードして使用

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

※Webフォントに関して詳しくは、記事「望みのフォントで表示できる!ウェブフォントの使い方」をご参照下さい(特に読まなくても、本記事の解説だけでも「Font Awesome」を使ってみることはできます)。

自身のウェブサーバ上に設置しなくても使える

CDN上で提供されているので、自サイトに設置する必要なく利用可能

CDN上で提供されているので、自サイトに設置する必要なく利用可能

この「Font Awesome」は、CDNサーバ上に置かれているため、たった1行のlink要素をHTMLに追記するだけで利用できます。わざわざファイル群をダウンロードして、自サイト上に設置する必要はありません。とても楽で簡単に使えます。

※自サイト上に設置したければ、フォントファイルをダウンロードして設置することもできます。


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