生活上の物や動物、SNS、ブランド、記号など、多種多様なアイコンを簡単に表示できる「Font Awesome」の使い方をご紹介します。
Font Awesomeの様々な使い方をはじめ、新旧のバージョンについてもお伝えします。
2022年3月追記
現在、最新バージョンは6です。
この記事では、バージョン4と5のみを解説していますが、各テーマもまだ、バージョン5までのものが多いと思います。
cocoonテーマでは、今のところ対応予定はないようで、以下のフォーラムにその理由が書かれています。Font Awesome 6に対応してほしい(Cocoonフォーラム)
Font Awesome とは

ウェブサイトでWebアイコンフォントを表示できるサービスで、世界中で大勢の人が利用しています。
クラス名を指定するだけでサイト上にアイコンフォントを表示でき、たいへん便利です。
サイトの読み込み速度が遅くなるというデメリットが挙げられていますが、アイコンフォントの定番となっています。
バージョンアップを重ねており、最新版はFont Awesome5です。
アイコンフォントの使用例
それぞれのアイコンで、いろいろなサイズ、色にできます。
Font Awesome Ver4とVer5の違い
Font Awesome5(新バージョン)には有料版があり、有料版と無料版では、アイコン数が圧倒的に違います。
ただ、無料でも主要なアイコンを利用できるので十分だと思います。
Font Awesome5 アイコンリスト
Font Awesome4 アイコンリスト
Ver4からVer5へ切り替える時の注意点
Ver4からVer5に切り替えると、一部修正が必要になるので、ちょっと面倒です。
同じアイコンは、アイコンを表示するためのコードがVer5とVer4が同じですが、片方のバージョンにしかないアイコンがあります。
そのため、旧バージョンから新バージョンに切り替えると表示されなくなるものが出る可能性があります。
また、後で解説しますが、Ver5とVer4は、CSSの記載方法などが一部違うので、修正が必要になる場合があります。
テーマによって対応状況が違う
Font Awesome5 (新バージョン) | 無料 | アイコン数 1,609 |
有料(年間99ドル) | アイコン数 7,865 | |
Font Awesome4 (旧バージョン) | 無料のみ |
多くのテーマでは、デフォルトでFont Awesomeを読み込み、アイコンリスト等の装飾に使われています。
最近は最新版のFont Awesome5が使えるテーマが多いようですが、旧バージョンのみに対応しているテーマもあるようです。
また、テーマJINはFontAwesome5に対応しているのですが、その読み込みをOFFにして、独自のアイコンフォントを利用できる機能があります。
この機能の利用により読み込み速度を早くできるようです。
テーマによる対応例(2021年7月現在)
Cocoon | Font Awesome5、4の両方に対応(切り替え設定有) |
JIN | Font Awesome5 (独自のアイコンフォント有) |
SWELL | Font Awesome5 |
SANGO | Font Awesome5 |
Diver | Font Awesome4 |
Affinger5 | Font Awesome4 |
※Font Awesomeを読み込むためのコードを追加すれば、対応以外のバージョンも利用できます。
Font Awesomeを使うための準備
Font Awesomeを使うためには以下の2通りの方法があります。
※デフォルトでFont Awesome読み込むテーマの場合、この手順は必要ありません。
- CDN(Content Delivery Network)を使う
- サーバーにアイコンデータをアップロード
Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。
自分のサーバー上にファイルを設置せずに、複数のサーバーに置かれているファイルの中から読み込んでデータ(この場合はアイコンフォント)を利用できます。
CDNを使う方法がおすすめです。
導入が簡単なことと、バージョンアップのたびにダウンロードする必要がないことです。
ここでは、CDNを使う方法をご紹介します。
CDNを使うための準備
Font Awesome5用のCDNを使うためheadには、headタグ内に以下のコードを貼付けます。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
バージョンが更新され、新アイコンが追加された時には、新アイコンを使うには、URLの中のv5.6.1の部分を最新バージョン番号に書き換える必要があります。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Cocoonの場合
Cocoonの場合、管理画面の設定でVer.5かVer.4かを選択できます。
Cocoon設定> 全体 をクリック

「サイトアイコンフォント」で、Font Awesome5か4を選択できます。
ワンタッチで変更できるのは便利ですね。

Cocoonでは、ブログカードやアイコンリスト等、フォントアイコンが随所に使用されていますが、新旧バージョンに共通のアイコンを使っているためか、設定でVer4からVer5に切り替えても、問題なく表示されます。
Font Awesomeの使い方
Font Awesome5を使う場合でご紹介します。
旧バージョンの場合もほぼ同様にできます。
①必要なアイコンを探す
Font Awesome5の場合の手順です。(旧バージョンも同様です。)
まず、Font Awesome5のアイコン一覧から目的に合ったアイコンを探します。
左側で種類を選べます。無料で探す場合は、Freeを選択します。

②アイコンフォントのコードをコピー
アイコン(laugh)の例
選んだアイコンをクリックすると以下のように表示されます。
左上に表示させるために必要なコードが載っています。
右側に、アイコンのスタイル別の一覧があり、「PRO」とあるのが有料です。
この例では、無料だと「SOLID」「REGULAR」の2種類が利用でき、画像は「REGULAR」が選択されています。

左上のコードの部分を拡大したものです。

HTMLは <i class="far fa-laugh"></i>
Unicode(ユニコード)は f599 ※後述のCSSの疑似要素で使います。
③表示させたい位置にHTMLコードを貼付ける
<i class="far fa-laugh"></i>
ブロックエディタ―の場合は、カスタムHTMLブロックに貼ります。
クラシックエディターの場合は、テキストエディターに貼ります。

アイコンのサイズを変更
「fa-サイズ」クラスを追加すると、アイコンサイズを変更できます。
<i class="far fa-laugh fa-2x"></i>
クラスには以下のような種類があります。
クラス名 | HTMLコード |
fa-xs(0.75倍) | <i class=”far fa-laugh fa-xs“></i> |
fa-sm(0.875倍) | <i class=”far fa-laugh fa-sm“></i> |
fa-lg (約1.33倍) | <i class=”far fa-laugh fa-lg“></i> |
fa-2x (2倍) | <i class=”far fa-laugh fa-2x“></i> |
fa-3x (3倍) | <i class=”far fa-laugh fa-3x“></i> |
fa-5x (5倍) | <i class=”far fa-laugh fa-5x“></i> |
・・・・・・・・・・・ | ・・・・・・・・・・・ |
fa-10x(10倍) | <i class=”far fa-laugh fa-10x“></i>CZ |
アイコンの色を変える
色の変更はstyle属性か、CSSで設定します。
以下のように「style」を使えば、記事内のHTMLだけで色指定ができます。
style=”color: 色;” の色は、以下のように色名でもカラーコードでもOKです。
<i class="far fa-laugh" style="color: blue;"></i>
<i class="far fa-laugh" style="color: #000ff;"></i>
色の例 | HTMLコード |
青 | <i class=”far fa-laugh” style=”color: blue;”></i> |
オレンジ | <i class=”far fa-laugh” style=”color: orange;”></i> |
赤 | <i class=”far fa-laugh” style=”color: red;”></i> |
オリーブ | <i class=”far fa-laugh” style=”color: #6b8e23;”></i> |
ディープピンク | <i class=”far fa-laugh” style=”color: #ff1493;”></i> |
アイコンと文字の間にスペースを作る
以下のようにアイコンフォントのすぐ横がテキストだと、間がなくて窮屈な感じがします。
<i class="far fa-laugh"></i>アイコンフォント
アイコンフォントとテキストの間にスペースを設けるには
- 半角スペースを空ける。
- fa-fwというクラス名を追加
fa-fwクラスについて
アイコンはそれぞれの幅が違うため、アイコンによりテキスト部分の表示開始位置がかわってしまいます。 fa-fwクラスによって、アイコンを表示している部分に統一の幅を持たせることができます。
異なるアイコンを並べる場合は、fa-fwクラスを使うとよいでしょう。
fa-fwクラスは以下のように記載します。
<i class="far fa-laugh fa-fw"></i>アイコンフォント
少し分かりにくいですが、fa-fw をつけることで icon 部分に横幅が付きます。
スマイル
ホーム
本
猫
スマイル
ホーム
本
猫
線で囲む
「fa-border」クラスを追加すると、アイコンを線で囲むことができます。
<i class="far fa-laugh fa-border"></i>
【HTML】<i class=”far fa-laugh fa-border fa-2x”></i>
角度を変える
「fa-rotate-数値」クラスを追加すると、アイコンを線で囲むことができます。
<i class="fas far fa-laugh fa-rotate-90"></i>
傾ける角度 | HTMLコード |
90度 | <i class=”far fa-laugh fa-rotate-90” ></i> |
180度 | <i class=”far fa-laugh fa-rotate-180” ></i> |
270度 | <i class=”far fa-laugh fa-rotate-270” ></i> |
反転させる
「fa-flip-horizontal」クラスを追加すると、反転させることができます。
<i class="far fa-twitter fa-flip-horizontal"></i>
HTMLコード | |
水平方向へ反転 | <i class=”fab fa-twitter fa-flip-horizontal“></i> |
垂直方向へ反転 | <i class=”fab fa-twitter fa-flip-vertical“></i> |
回転させる(アニメーション)
「fa-spin」クラスを追加すると、アイコンをくるくると回転させることができます。
<i class="farfas fa-sync fa-spin"></i>
【HTML】<i class=”farfas fa-sync fa-spin”></i><i class=”farfas fa-sync fa-spin”></i>
アイコンを重ねる
「fa-stack」クラスで、アイコンの上にアイコンを重ね合わせることができます。
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-mug-hot fa-stack-1x" style="color: white;"></i>
</span>
- spanタグ(class名:fa-stack)の中に2つのアイコンを入れる
- 最初に背面のアイコンを書き、class名にfa-stack-2xを追加
- 2番目に前面のアイコンを書き、class名にfa-stack-1xを追加
- 2番目のアイコンの色にスタイルstyle=”color: white;”(白)を設定
二重のアイコンのサイズを大きくするには、
以下のようにspanタグ(class名:fa-stack)に fa-2x、fa-3x…..のようにサイズ用のクラスを追加します。
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-mug-hot fa-stack-1x" style="color: white;"></i>
</span>
Font AwesomeをCSS(疑似要素)で使う
CSSでアイコンフォントを表示させることができます。
疑似要素(:beforeや:after)を使います。
※CSSを使う場合、Font Awesome5と4で一部記載方法が違うので注意が必要です。
<p><span class="car-icon">車のアイコンです。</span></p>
.car-icon:before {
font-family: "Font Awesome 5 Free";
content: '\f1b9';
font-weight: 900;
color: #f89174;
font-size:200%;
}
上記のHTML+CSSで以下のように表示されます。
です。
CSSの解説
font-family: "Font Awesome 5 Free";
⇒ Font Awesome 5(無料)の場合content: '\f1b9';
⇒ アイコンの種類=Unicode(ユニコード)font-weight: 900;
⇒ font-weightの指定が必要color: #f89174;
⇒ 色を指定font-size:200%;
⇒ サイズを指定
アイコンリストのUnicode(ユニコード)とアイコンの種類は、各アイコンのページ左上に表示されています。

font-familyの記載は、Ver5とVer4は違う
Font Awesome 5 と Font Awesome 4 は「font-family」が違います。
- Font Awesome 5 ⇒
font-family: "Font Awesome 5 Free";
- Font Awesome 4 ⇒
font-family:"Font Awesome";
font-weightの指定が必要(Ver5)
FontAwesome5はCSSでアイコンを表示する場合、アイコンの種類ごとにfont-weightの設定が必要です。
- SOLID(fas) ⇒ font-weight:900
- REGULAR(far) ⇒ font-weight:400
- LIGHT(fal) ⇒ font-weight:300
- BRANDS(fab) ⇒ font-weight:400
色やサイズの指定
色やサイズなども、一般的なテキスト等と同じように自由に指定できます。
見出しでフォントアイコンを使う
見出しでアイコンフォントを使う場合は以下のように書きます。
以下の例はh3にtitle-icon
というクラスを指定しています。
※全てのh3にアイコンフォントを使う場合は、クラス指定は必要ありません。
<h3 class="title-icon"> フォントアイコンを使った見出し</h3>
h3.title-icon :before {
font-family: "Font Awesome 5 Free";
content: "\f005";
font-weight: 900;
padding-right: 5px;/*アイコンと文字の間隔*/
color: #745c51;/*アイコンの色*/
}
上記のHTMLとCSSで以下のように表示されます。
※Cocoonデフォルトの見出しスタイル(h3)にアイコンを追加した例です。

フォントアイコンが表示されない場合
CSSを使った場合にフォントアイコンが表示されない場合があります。
そうした場合は、以下のようなケースが考えれらます。
色々なパターンのアニメーションを付けたい
「Font Awesome Animation」を使うと、さらに多くのアニメーションをつけられ、様々な動きのパターンを実現できます。
Font Awesome同様、CDNとダウンロード版がありますが、ここではCDNをご紹介します。
CDNを使うための準備
Font Awesome同様、headタグ内に以下のコードを貼付けます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.3.0/font-awesome-animation.min.css" type="text/css" media="all" />
アニメーションを付ける方法
アニメーション用のクラスを追加するだけで多彩なアニメーションが実現できます。
faa-wrench animated
がアニメーションのクラス名です。
<i class="fas fa-car-side faa-wrench animated"></i>
アニメーションの例
<i class="fas fa-car-side fa-3x faa-bounce animated"></i> /*跳ねる*/
<i class="fas fa-car-side fa-3x faa-wrench animated"></i> /*レンチ風*/
<i class="fas fa-car-side fa-3x faa-flash animated"></i> /*点滅*/
プレビュー | アニメーション | クラス名 |
---|---|---|
レンチ風 | faa-wrench animated | |
ブルブル | faa-ring animated | |
横揺れ | faa-horizontal animated | |
縦揺れ | faa-vertical animated | |
点滅 | faa-flash animated | |
跳ねる | faa-bounce animated | |
スピン | faa-spin animated | |
浮かぶ | faa-float | |
パルス | faa-pulse animated | |
シェイク | faa-shake animated | |
ジャジャーン! | faa-tada animated | |
通過 | faa-passing animated | |
爆発 | faa-burst animated |
アニメーションのスピードを変える
動くスピードを変えるクラスも用意されています。
faa-fast
⇒ 速い faa-slow
⇒ 遅い
<i class="fas fa-biking faa-passing animated faa-fast"></i>
<i class="fas fa-biking faa-passing animated faa-slow"></i>
アイコンへのhover時に動かす
アイコンにカーソルをのせた時(hover時)のみ動かすこともできます。animated
をanimated-hover
に書き換えます。
<i class="fas fa-bell faa-ring animated-hover"></i>
詳しくは Font Awesome Animation をご覧ください。
まとめ
FontAwesomeの使い方の解説は以上です。
テーマであらかじめ用意されているフォントアイコンを使っている方も多いと思いますが、HTMLコードとクラスの使い方を覚えたら、目的や好みに合った、より幅広いアイコンが選択でき、表現の幅が広がります。