リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

Webフォントでアイコンを表示できる「Font Awesome」


head

Font Awesomeは、Webサイトで使える様々なアイコンをテキストとして表示できる便利なフォントセットと、それを簡単に出力するためのCSSフレームワークを提供してくれます。

画像ではなくテキストなので、

  • サイズを大きくして表示しても画質が落ちない
  • 色を自由に変えられる
  • CSSでドロップシャドウなどが簡単に付けられる

などの特徴があります。

また、Twitter Bootstrapで提供されているアイコンセットと似た内容になっており、アイコンを出力するための記述方法もTwitter Bootstrapと全く同じなので、Twitter Bootstrapのアイコンの置き換えとして利用することが出来ます。

使い方

使い方はとても簡単です。

  1. Font Awesomeトップページより、ファイル群をダウンロード
  2. ダウンロードしたzipファイルを展開し、「css」フォルダと「font」フォルダをWebサイトのソースツリー上に設置
  3. 利用したいページのHTMLにて、css/font-awesome(.min).css を読み込み
  4. 利用したい箇所に<i class="アイコン名"></i>を記述

(ただし、Twitter Bootstrapと併用する場合は、font-awesome(.min).cssをbootstrap(.min).cssよりも後に読み込む必要があります。)

大変便利なので、是非お試しください。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック