2012年12月25日(火) 17時35分30秒 [仕事]

アイコンフォントセット「Font Awesome」の使い方を解説

ウェブ上に掲載して利用する「アイコン」というと、通常は「画像」ですよね？
ところが、200種類を超えるウェブ向けの実用的なアイコンが、すべて「フォント」の形で提供されている「Font Awesome」というフリーのフォントセットがあります。これを使うと、アイコンを（画像ではなく）「文字」として表示できます。

CSS3の「ウェブフォント」機能を使えば、ウェブサーバ上にあるフォントファイルを読み込んでブラウザ上の表示に使えます。閲覧者の環境側にフォントがインストールされている必要はありません。なので、CSS3に対応したブラウザ（最近の主なブラウザはみな対応しています）を対象にする限り、アイコンを文字として簡単に表示できるようになります。

「Font Awesome」を使って表示するアイコンは、あくまでも「文字」なので、大きさも配色も自由自在！という大きなメリットがあります。フォントで実現されたアイコンなので、画像で作ったアイコンにある「配色が固定されてしまう」・「綺麗に拡大縮小しにくい」・「容易に（色や大きさを）修正できない」といったデメリットがありません。

そんな「Font Awesome」の使い方を解説した記事を、All Aboutで公開しました。使い方は、指定のclass名を付加するだけというお手軽なものです。ぜひ、試してみて下さい。

◆『アイコンをWebフォントで表示できる「Font Awesome」』（＠All About ホームページ作成）