Webアイコン(FontAwesome)を使ってみよう！

2018年9月14日2021年7月26日ブログ

アイコンフォントはアイコンを文字として使えるようしたツールです。アイコンフォントを提供しているサービスはいくつかありますが、その中で最も使われている「Font Awesome(フォント オーサム)」を使ってみることにしました。

今回の記事では「Font Awesomeの導入方法や使い方」などを紹介したいと思います。

FontAwesomeを使うための準備(導入方法)

導入方法には「アカウント登録してコードを取得」「プラグインを使って導入」「Luxeritasをお使いの場合(テーマの機能を使う)」方法があります。いずれかの方法で導入してください。

アカウント登録をしてコードを取得

FontAwesomeを利用するためには『読み込みコード』をサイトに挿入する必要があります。
現在コードの取得には「アカウント登録」が必要となっています。(2019年10月)
読み込みコードの取得方法は以下を参考にしてください。

プラグインを使って導入

プラグインを使うとアカウント登録しなくてもFont Awesomeを導入することができます。

テーマ『Luxeritas』をお使いの場合

WordPressテーマ『Luxeritas(ルクセリタス)』をお使いの方は導入方法が違いますのでこちらの記事を参考にしてください。(使い方は同じです。)

FontAwesomeの使い方

FontAwesome 公式

では実際にWebアイコンをページ(記事)内で使ってみましょう。

1 FontAwesomeのページに移動してください。

2 FontAwesomeのページ上部の『Icon』をクリック。

3 アイコンの一覧が表示されるので使いたいアイコンをクリック。

4 アイコンのページが表示されますので、アイコン名の下の中央あたりにあるアイコンのコードをコピーしてください。

5 アイコンのコードをコピーしたら、記事の使いたい箇所にコピーしたコードを挿入してください。

サンプル

<i class="fas fa-anchor"></i>

※上記では〈i〉タグを使用していますが、divやspanタグでも使えます。
div、spanタグにclass="アイコンコード"を入れてください。

<div class="fas fa-anchor"></div>

色や大きさ、動きを変える

WebアイコンはCSSを使用して文字と同じように色を変えたり、大きさを変えたりすることができます。

またFontAwesomeにはアイコンの大きさを変えたり、動きをつけたりできる『クラス』があります。
※複数のクラス(class)指定は半角スペースで区切ります。

色を変える

色を変えるには文字と同じようにCSSで変恋します。

<i class="fas fa-exclamation-circle ico-red"></i>

.ico-red{
  color:#ff000;
}

※色を指定するクラス名はご自分でわかりやいものをお使いください。

アイコンの幅を揃える

指定しない場合のサンプル
HOME
CARET
BOOK

アイコンの幅を揃えるためにはfa-fwというクラスを追加します。

<i class="fas fa-exclamation-circle fa-fw"></i>指定した場合のサンプル
<i class="fas fa-home fa-fw"></i>HOME
<i class="fas fa-caret-right fa-fw"></i>CARET
<i class="fas fa-book fa-fw"></i>BOOK

指定した場合のサンプル
HOME
CARET
BOOK

大きさを変える

(左からxs、sm、lg、2倍、3倍、4倍)

fa-サイズを入れると大きさを変えることができます。
サイズの指定：xs / sm / lg / 数値x

<i class="fas fa-exclamation-circle fa-xs"></i>
<i class="fas fa-exclamation-circle fa-sm"></i>
<i class="fas fa-exclamation-circle fa-lg"></i>
<i class="fas fa-exclamation-circle fa-2x"></i>
<i class="fas fa-exclamation-circle fa-3x"></i>
<i class="fas fa-exclamation-circle fa-4x"></i>

CSSのfont-sizeでも大きさを変えることができます。

回転

fa-spinを使うとアイコンを回転させることができます。

わかりやすく大きさを3倍にして回転させています。

<i class="fas fa-sync fa-3x fa-spin"></i>

重ねる

これはと の2つのアイコンを重ねています。

fa-stackを使うと2つのアイコンを重ねることができます。

<span class="fa-stack">
  <--!下になるアイコン 2倍で指定-->
    <i class="far fa-circle fa-stack-2x"></i>
  <--!上になるアイコン 1倍で指定-->
    <i class="far fa-file-alt fa-stack-1x"></i>
</span>

応用編

組み合わせて使えばいろいろできます。以下はほんの一部の応用編です。参考程度に。

サンプル1

2つのアイコンを重ねて色を赤に変更しています。

<span class="fa-stack" style="color:red;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="far fa-file-alt fa-stack-1x"></i>
</span>

サンプル2

2つのアイコンを重ねて色を青に変更、「fa-lg」でアイコンを大きくしています。

<span class="fa-stack fa-lg" style="color:blue;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="far fa-file-alt fa-stack-1x"></i>
</span>

サンプル3

サンプル2に「fa-spin」を加えて中のアイコンを回転しています。

<span class="fa-stack fa-lg" style="color:blue;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="far fa-file-alt fa-stack-1x fa-spin"></i>
</span>

サンプル4

使用アイコン   (2倍・赤)・ (1倍・白)

<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x" style="color:red;"></i>
  <i class="far fa-file-alt fa-stack-1x" style="color:white;"></i>
</span>

Webアイコンと数字を組み合わせる

Webアイコンと数字を組み合わせて、 や で囲んだ数字もできます。

丸で囲んだ数字

2

<span class="fa-stack fa-xs" style="color:#dd143c;">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-inverse fa-stack-1x">2</i>
</span>

四角で囲んだ数字

3

<span class="fa-stack fa-xs" style=" color: #dd143c;">
  <i class="fas fa-square fa-stack-2x">
  </i><i class="fa fa-inverse fa-stack-1x">3</i>
</span>

2020年5月6日 書き換え

CSS(擬似要素)で指定する

CSS(擬似要素)でアイコンを指定する場合は以下のように記述します。

.icon-sample:before {
    font-family:"Font Awesome 5 Free";
    content:"アイコンのコード";
    font-weight:900または400;
}

※擬似要素についてはこちら

SVG表示している場合

上記では「Webフォント」表示での使い方を主に紹介していますが、「SVG」表示している場合、CSS(擬似要素)の指定にはもうひと手間加える必要があります。

.icon-sample:before {
    display:none;
    font-family:"Font Awesome 5 Free";
    content:"アイコンのコード";
    font-weight:900または400;
}

SVG表示している場合、「font-family」「content」「font-weight」の他に「display:none;」を追加する必要があります。

2019年10月26日 書き換え

旧バージョンのFontAwesomeを使うには？

上は最新バージョンのFontAwesome5です。
バージョン5はアイコンやクラス名、font-weightの指定が必要になったりと一新されています。

バージョン5は旧バージョンじ比べちょっと使いづらくなり、「前のバージョンのがよかった」という人も少なくありません。

FontAwesomeの旧バージョンは今でも使えますが、開発はされておらず、新しいアイコンが追加されることはありません。
またバージョン5に一新したことにより旧バージョンの提供を辞めてしまうかもしれません。

ForkAwesome(fフォーク オーサム)

ForkAwesome 公式

ForkAwesomeは、製作者がFontAwesomeのバージョン5の方向性に疑問を持ち、FontAwesomeから分かれForkAwesomeを立ち上げたプロジェクトです。

そのため、FontAwesomeの旧バージョンのアイコンを読み込みコードを変更すれば使え、CSSの指定もfont-familywo変更すれば旧バージョンと同じように使えます。
さらに新しいアイコンも追加されています。

ForkAwesomeの使い方やいこうの方法など詳しくは以下のサイトで詳しく説明されていますので参考にしてみてください。

FontAwesomeの旧バージョンを使いたいという方はForkAwesomeを使ってみてください。

最後に

WordPressにはWebアイコンを簡単に使えるプラグインがありますが、この方法の方がいろいろなことに使えると思います。

Webアイコンを使うとわかりづらいリンクや見出しがわかりやすくなったりします。
文字だけより読んできれる人の目を引きますし、読んでくれるユーザーも読みやすくなると思います。

ぜひ使ってみてください。

こちらの記事も参考にどうぞ！