ホームページ作成/テキストの配置・装飾 (HTML,CSS)

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

約4千種類ものアイコン(絵文字)を収録したWebフォント「Font Awesome 5」を自サイトで簡単に使う方法を解説。アイコンを文字として表示できるため、CSS(スタイルシート)で簡単に色やサイズを指定可能。アイコンを回転させたり重ね合わせたりする方法も紹介。無料版でも1300種類以上のアイコンWebフォントが使えます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

※注意:このページでは、古いバージョンである「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を使ったアイコン(絵文字)の表示例

Font Awesomeを使ったアイコン(絵文字)の表示例


ここでは何の装飾も施していないため、一般の文字と同じ配色・サイズで表示されます。

 

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

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

まずは、様々なアイコンを望みのサイズ・配色で表示させてみましょう。
 
  1. アイコン一覧から望みのアイコンを探す
  2. アイコンを表示するためのHTMLソースを書く
  3. アイコンのサイズや配色をCSSで自由に指定する

1. アイコン一覧から望みのアイコンを探す
アイコンフォントに含まれている全アイコンと、それらを表示したい際に記述するclass名の一覧は、Font Awesome 4サイト内のThe Iconsページに掲載されています。まずは、ここから望みのアイコンを探して下さい。
 
公式サイトにあるアイコン一覧ページ (Ver 4.7.0)

公式サイトにあるアイコン一覧ページ (Ver 4.7.0)


 
アイコンの一覧ページから望みのアイコンを探してクリックすると、下図のように6種類のサイズに拡大した例が表示されます。
 
アイコンの拡大ページ:記述例のHTMLソースなども記載されている

アイコンの拡大ページ:記述例のHTMLソースなども記載されている


拡大アイコンの下部には、そのアイコンを表示するために記述する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 AwesomeのアイコンにCSSで色を加えた例

Font AwesomeのアイコンにCSSで色を加えた例


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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます