アイコンWebフォント Font Awesome 5 の簡単な使い方(3ページ目)

※注意：このページでは、古いバージョンである「Font Awesome 4」の使い方を解説しています。これからFont Awesomeを使う場合は、あえて古いバージョンを使う必要性はありませんので、本記事の1ページ目にあるFont Awesome 5の使い方をご覧下さい。
 

Font Awesome 4で望みのアイコンを表示する方法(概要)

Font Awesome 4で提供されているアイコン(絵文字)の表示方法にはいくつかありますが、i要素にclass属性を指定する方法が簡単です。公式サイトでもその書き方で説明されています。まず「fa」という共通のclass名を必ず指定した上で、「fa-home」や「fa-check」などの各アイコンに割り振られたclass名を指定します。

<i class="fa fa-home"></i> ホームアイコン
<i class="fa fa-check"></i> チェックアイコン
<i class="fa fa-download"></i> ダウンロードアイコン
<i class="fa fa-warning"></i> 注意アイコン
<i class="fa fa-shopping-cart"></i> カートアイコン
<i class="fa fa-pencil"></i> 鉛筆アイコン
<i class="fa fa-rss"></i> RSSアイコン

上記のソースをブラウザで表示すると、下図のようにアイコンが見えます。このように、class属性の値に指定の名称を記述することで様々なアイコンを表示できます。
 
ここでは何の装飾も施していないため、一般の文字と同じ配色・サイズで表示されます。

 

Font Awesome 4を使って望みのアイコンを表示する手順

Font Awesome 4のアイコンはWebフォント機能を使ったテキスト(文字)なので、通常の文字と同様にサイズや色をCSSで指定できます。また、アイコンを回転させたり、複数のアイコンを重ねて組み合わせたりもできます。その方法を、これ以降でご紹介いたします。

まずは、様々なアイコンを望みのサイズ・配色で表示させてみましょう。
 

1. アイコン一覧から望みのアイコンを探す
2. アイコンを表示するためのHTMLソースを書く
3. アイコンのサイズや配色をCSSで自由に指定する

■1. アイコン一覧から望みのアイコンを探す
アイコンフォントに含まれている全アイコンと、それらを表示したい際に記述するclass名の一覧は、Font Awesome 4サイト内のThe Iconsページに掲載されています。まずは、ここから望みのアイコンを探して下さい。
 
アイコンの一覧ページから望みのアイコンを探してクリックすると、下図のように6種類のサイズに拡大した例が表示されます。
 
拡大アイコンの下部には、そのアイコンを表示するために記述するclass名(上図の場合は「fa-pencil」)と、HTMLソースの記述例も掲載されています。

■2. アイコンを表示するためのHTMLソースを書く
アイコンを表示するには、先ほどご紹介したようにi要素にclass属性を加える方法が簡単です。

<i class="fa fa-pencil"></i> 鉛筆アイコン

i要素でなければならないわけではないので、他の要素を使っても構いません。例えば、以下のようにspan要素でも表示できます。

<span class="fa fa-rss"></span> RSSアイコン

インライン要素に限らずブロックレベル要素でも使えます。以下のようにp要素に加えると、段落の先頭にアイコンが付加されます。ただし、Font Awesome側のCSSによって、対象の要素はすべてインラインブロック(inline-block)として表示されるので注意して下さい。

<p class="fa fa-book">本アイコン</p>

※Font AwesomeのCSSは、:before擬似要素とcontentプロパティを使って、対象要素の先頭にアイコン文字を挿入しています。

■3. アイコンのサイズや配色をCSSで自由に指定する
Font Awesomeのアイコンは画像ではなくテキストですから、通常の文字と同様にCSSを使って装飾ができます。

<p style="font-size: 60px; color: green;">
   <i class="fa fa-flag"></i> 旗アイコン
</p>
<p style="font-size: 24px; color: red;">
   <i class="fa fa-lock"></i> ロックアイコン
</p>

上記のソースを表示すると、下図のように見えます。
 
このように、font-sizeプロパティを使えばアイコンの表示サイズを指定できますし、colorプロパティを使えば表示色を指定できます。ここでは使っていませんが、background-colorプロパティを使えば背景色を指定することもできます。

上記では各アイコンをそのまま単独で表示しただけですが、Font Awesomeにはアイコンを回転させたり、複数のアイコンを重ねて表示したりできる機能もあります。最後に、アイコンの回転方法や重ね合わせる装飾方法についてご紹介いたします。