アイコンフォントの具体的な使い方 - Font Awesome

アイコンフォントを利用する上で便利なサイト「Font Awesome」から、フォントファイルをダウンロードしてWebページに表示するまでの具体的な手順について解説します。

Font Awesome は、フレームワークとして有名な Bootstrap のアイコンを Webフォントとして利用できるようにしたものです。

記事執筆時点で479種類のアイコンが登録されており、ライセンスは SIL OFL 1.1 になっています。

添付されているCSSには、アイコンフォントにスタイルや効果を適用するさまざまなクラスが定義されており、提供されているファイルだけでもたくさんの便利な機能を使えます。

【コンテンツ】

  1. フォントファイルをダウンロードする
  2. ダウンロードしたファイルをディレクトリに配置する
  3. CSSをインクルードするlinkタグを記述する
  4. アイコンを表示するためのHTMLコードを確認する
  5. アイコンを表示したい場所にHTMLコードを記述する
  6. アイコンをテキストとして文章に挿入する
  7. アイコンをPCのアプリケーションで使う

フォントファイルをダウンロードする

下記ページにアクセスし、[Download]をクリックします。
http://fortawesome.github.io/Font-Awesome/

Font Awesome ダウンロードページ

ダウンロードしたzipファイルを解凍すると、以下のファイルが含まれています。

ダウンロードしたファイルリスト

ファイル 説明
フォントファイル
(.eot/.otf/.svg/.ttf/.woff)
5種類のフォーマットのフォントファイルがあります。
font-awesome.css
font-awesome.min.css
@font-faceとアイコン表示で利用するクラスを記述したCSSです。
通常版とMinified版の2種類用意されています。
LESS/SCSSファイル CSS拡張メタ言語であるLESSとSass(SCSS形式)のファイルです。今回は使いません。

ダウンロードしたファイルをディレクトリに配置する

フォントファイル4種類(.otfは必要なし)とCSSをサイトのディレクトリに配置します。

配置するディレクトリは任意で構いませんが、HTMLファイル直下の[css]ディレクトリにCSSを置き、[fonts]ディレクトリにフォントファイルを置くと、CSSは修正なしで使えます。

CSSをインクルードするlinkタグを記述する

Webページのhead要素内に、CSSをインクルードするlinkタグを記述します。

以下は省略があるHTML5の記述です。

【補足】
CDNを利用する方法も用意されています。
その場合はhead要素内に以下の記述をするだけでよく、サイト内のディレクトリにフォントファイルやCSSを配置する必要もありません。

アイコンを表示するためのHTMLコードを確認する

アイコンを表示するには、アイコンを表示したい場所のHTML要素にクラスを付与します。

以下のようなフォーマットで記述します。<i>の代わりに<span>を使っても構いません。

上記の[icon名]部分にどのアイコン画像が対応しているか知るには、
http://fortawesome.github.io/Font-Awesome/icons/ にアクセスして、利用したいアイコンをクリックします。

アイコン選択画面

クリックしたアイコンを表示するHTMLコードが表示されますので、このコードをコピーしておきます。

HTMLコード表示画面

あるいは、下記ページにも一覧がありますので確認できます。
http://fortawesome.github.io/Font-Awesome/cheatsheet/

Cheatsheet

アイコンを表示したい場所にHTMLコードを記述する

基本的な記述方法

先ほど確認したコードを利用して、以下のように記述します。

実際の表示は以下のようになります。

 救急車

フォントサイズを大きくする

用意されているクラスとして、以下の5つがあります。
fa-lg:33%拡大
fa-2x:2倍
fa-3x:3倍
fa-4x:4倍
fa-5x:5倍

これらのクラスを指定したコードは以下になります。

実際の表示は以下になります。

 救急車(1.33倍)

 救急車(2倍)

 救急車(3倍)

 救急車(4倍)

 救急車(5倍)

アイコンの幅を固定する

アイコンはサイズがそれぞれ異なるため、その後に続くテキストの開始位置も違ってきます。
"fa-fw"というクラスを指定することで、アイコンが同じ幅に固定され、その後に続くテキストの開始位置が揃います。

例えば、以下は"fa-fw"を指定せずに表示した例ですが、テキストの開始位置が微妙にずれています。

飛行機

バス

タクシー

以下は、"fa-fw"を指定したコードと表示になります。今度はテキストの開始位置が揃っています。

飛行機

バス

タクシー

リストのブレットとしてアイコンを使う

ul要素のブレットとしてアイコンを使うことができます。
この場合、ul要素に"fa-ul"を指定し、li要素に"fa-li"を指定します。

以下はそのコード例と表示です。

  • check
  • check-square
  • check-square-o
  • check-circle

アイコンをボーダーで囲う

"fa-border"を指定すると、アイコンにボーダーをつけることができます。
ただし、ボーダーに関しての細かい設定用クラスは他にありませんので、別途指定する必要があります。

以下は、「font-awesome.css」に記述されている"fa-border"のスタイルです。

以下は、"fa-border"を指定したコード例と表示です。

 ホーム

アイコンをアニメーションで回転させる

"fa-spin"を指定すると、アイコンを回転させることができます。

以下は、「font-awesome.css」に記述されている"fa-spin"のスタイルです。

回転用のアイコンも何種類か用意されていますので、それらを表示するコード例を示します。

    

アイコンを反転/90°単位で回転して表示する

以下のクラスが用意されています。
fa-flip-horizontal:水平方向に反転
fa-flip-vertical:垂直方向に反転
fa-rotate-90:時計回りに90°回転
fa-rotate-180:時計回りに180°回転
fa-rotate-270:時計回りに270°回転

以下は、それぞれのコード例と表示です。

 ノーマル表示

 水平方向に反転

 垂直方向に反転

 時計回りに90°回転

 時計回りに180°回転

 時計回りに270°回転

アイコンを重ね合わせる

アイコンは複数重ね合わせることができます。
"fa-stack"を親要素に指定し、子要素には"fa-stack-1x"(通常サイズ)あるいは"fa-stack-2x"(倍サイズ)を指定します。
全体のアイコンサイズを変更するには、親要素にfa-lgなどのフォントサイズ変更用クラスを指定します。

以下はコード例と表示です。


ファイルアイコンとクローズアイコン

アイコンの色を変更する

アイコンの色を変更するクラスは、white(#ffffff)にする"fa-inverse"だけが用意されています。
その他の色に変えるには、別途クラスを定義するか、HTML要素にstyle属性で指定します。

このサイトで使用しているCSSには、"red"や"green"などの色指定用のクラスがありますので、それを使った例を示します。またstyle属性で指定した例も示します。

 紅いグラス

 緑のグラス

アイコンをテキストとして文章に挿入する

アイコンを表示するにはbefore疑似要素を使ったクラスを指定しましたが、テキストとして直接文章内に挿入することもできます。

Cheatsgeet(http://fortawesome.github.io/Font-Awesome/cheatsheet/)で、挿入するUnicodeを確認してください。
「&#xf???;」の部分がUnicodeです。

Cheatsgeet

font-familyに"FontAwesome"を指定し、以下のように記述します。

実際の表示は以下になります。

アイコン    テキスト

アイコンをPCのアプリケーションで使う

PhotoshopなどのPCアプリケーションでもアイコンフォントを使うことができます。

以下、例としてWindows 7のPhotoshopで使う手順です。

コントロールパネルから、[デスクトップのカスタマイズ]-[フォント]とクリックします。
あるいは、[ファイル名を指定して実行]で、「%windir%\fonts」と入力しても同じです。

フォントフォルダ画面

「FontAwesome.otf」を、フォントフォルダにドラッグ&ドロップします。
これで FontAwesome がPCにインストールされ、アプリケーションで使えるようになります。

Cheatsgeet(http://fortawesome.github.io/Font-Awesome/cheatsheet/)で、使いたいフォントをコピーします。フォント画像を[Ctrl]+[C]でコピーしてください。

Photoshopのテキストとして、[Ctrl]+[V]で貼り付けます。
この段階ではまだフォントが正しく設定されていません。

フォントが正しく設定されていない文章

コピーした部分を選択し、フォントの[FontAwesome]を設定するとアイコンが表示されます。

フォントが正しく設定された文章

フォントですから、サイズ変更や色変更の他、Photoshopで持っている効果なども自由につけることができます。

アイコンに効果をつけた例

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ