Font Awesomeの使い方（WordPressでアイコンフォント）

生活上の物や動物、SNS、ブランド、記号など、多種多様なアイコンを簡単に表示できる「Font Awesome」の使い方をご紹介します。

Font Awesomeの様々な使い方をはじめ、新旧のバージョンについてもお伝えします。

2022年３月追記
現在、最新バージョンは6です。
この記事では、バージョン４と５のみを解説していますが、各テーマもまだ、バージョン5までのものが多いと思います。

cocoonテーマでは、今のところ対応予定はないようで、以下のフォーラムにその理由が書かれています。Font Awesome 6に対応してほしい（Cocoonフォーラム）

Font Awesome とは
Font Awesome　Ver4とVer5の違い
1. Ver4からVer5へ切り替える時の注意点
2. テーマによって対応状況が違う
Font Awesomeを使うための準備
1. CDNを使うための準備
2. Cocoonの場合
Font Awesomeの使い方
Font AwesomeをCSS（疑似要素）で使う
色々なパターンのアニメーションを付けたい
1. CDNを使うための準備
2. アニメーションを付ける方法
まとめ

Font Awesome とは

ウェブサイトでWebアイコンフォントを表示できるサービスで、世界中で大勢の人が利用しています。

クラス名を指定するだけでサイト上にアイコンフォントを表示でき、たいへん便利です。

サイトの読み込み速度が遅くなるというデメリットが挙げられていますが、アイコンフォントの定番となっています。

バージョンアップを重ねており、最新版はFont Awesome5です。

アイコンフォントの使用例

それぞれのアイコンで、いろいろなサイズ、色にできます。

Font Awesome　Ver4とVer5の違い

Font Awesome5（新バージョン）には有料版があり、有料版と無料版では、アイコン数が圧倒的に違います。

ただ、無料でも主要なアイコンを利用できるので十分だと思います。

Font Awesome5 アイコンリスト

Search v5 Icons | Font Awesome

Search all the v5 icons. Try Font Awesome 6 with the all new Thin style.

Font Awesome4　アイコンリスト

Font Awesome Icons

Font Awesome, the iconic font and CSS framework

Ver4からVer5へ切り替える時の注意点

Ver4からVer5に切り替えると、一部修正が必要になるので、ちょっと面倒です。

同じアイコンは、アイコンを表示するためのコードがVer5とVer4が同じですが、片方のバージョンにしかないアイコンがあります。
そのため、旧バージョンから新バージョンに切り替えると表示されなくなるものが出る可能性があります。

また、後で解説しますが、Ver5とVer4は、CSSの記載方法などが一部違うので、修正が必要になる場合があります。

テーマによって対応状況が違う

Font Awesome5 （新バージョン）	無料	アイコン数　1,609
Font Awesome5 （新バージョン）	有料（年間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）を使う
サーバーにアイコンデータをアップロード

CDNとは

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の部分を最新バージョン番号に書き換える必要があります。

Font Awesome4を使うためのコードはこちら


<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は 
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

表示例

⇒0.75倍　　 ⇒等倍　　 ⇒1.33倍　　 ⇒2倍　　 ⇒5倍

アイコンの色を変える

色の変更は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-fwなしの場合

表示例

スマイル

ホーム

本

猫

fa-fwを付けた場合

表示例

スマイル

ホーム

本

猫

線で囲む

「fa-border」クラスを追加すると、アイコンを線で囲むことができます。

<i class="far fa-laugh fa-border"></i>

表示例（2倍の大きさ））

【HTML】

角度を変える

「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>

表示例

⇒90度　　 ⇒180度　　 ⇒270度

反転させる

「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】

アイコンを重ねる

「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)の中に２つのアイコンを入れる
　最初に背面のアイコンを書き、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>

表示例

⇒ サイズ指定なし　 ⇒ 2倍のサイズ

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-familyの記載のバージョンが違う　詳細はこちら
font-weightの指定が必要　詳細はこちら

色々なパターンのアニメーションを付けたい

「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>　/*点滅*/

表示例

跳ねる　　レンチ風　　点滅　　

「Font Awesome Animation」で表現できる主なアニメーション

プレビュー	アニメーション	クラス名
	レンチ風	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コードとクラスの使い方を覚えたら、目的や好みに合った、より幅広いアイコンが選択でき、表現の幅が広がります。

Font Awesome とは

Font Awesome Ver4とVer5の違い

Ver4からVer5へ切り替える時の注意点

テーマによって対応状況が違う

Font Awesomeを使うための準備

CDNを使うための準備

Cocoonの場合

Font Awesomeの使い方

①必要なアイコンを探す

②アイコンフォントのコードをコピー

③表示させたい位置にHTMLコードを貼付ける

アイコンのサイズを変更

アイコンの色を変える

アイコンと文字の間にスペースを作る

fa-fwクラスについて

線で囲む

角度を変える

反転させる

回転させる（アニメーション）

アイコンを重ねる

Font AwesomeをCSS（疑似要素）で使う

CSSの解説

font-familyの記載は、Ver5とVer4は違う

font-weightの指定が必要（Ver5）

色やサイズの指定

見出しでフォントアイコンを使う

フォントアイコンが表示されない場合

色々なパターンのアニメーションを付けたい

CDNを使うための準備

アニメーションを付ける方法

アニメーションのスピードを変える

アイコンへのhover時に動かす

まとめ

Font Awesome　Ver4とVer5の違い