スポンサーリンク

【2021年最新】Font Awesomeの使い方(WordPressでアイコンフォント)

Font Awesomeの使い方Word Press

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

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

Font Awesome とは

Font Awesomeの使い方

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

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

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

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

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

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

         

Font Awesome Ver4とVer5の違い

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

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

Font Awesome5
(新バージョン)
無料アイコン数 1,609
有料(年間99ドル)アイコン数 7,865
Font Awesome4
(旧バージョン)
無料のみ

Font Awesome5 アイコンリスト

Font Awesome4 アイコンリスト

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

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

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

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

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

多くのテーマでは、デフォルトでFont Awesomeを読み込み、アイコンリスト等の装飾に使われています。

最近は最新版のFont Awesome5が使えるテーマが多いようですが、旧バージョンのみに対応しているテーマもあるようです。

また、テーマJINはFontAwesome5に対応しているのですが、その読み込みをOFFにして、独自のアイコンフォントを利用できる機能があります。
この機能の利用により読み込み速度を早くできるようです。

テーマによる対応例(2021年7月現在)

 CocoonFont Awesome5、4の両方に対応(切り替え設定有)
 JINFont Awesome5 (独自のアイコンフォント有)
 SWELLFont Awesome5
 SANGOFont Awesome5
 DiverFont Awesome4
 Affinger5Font Awesome4

※Font Awesomeを読み込むためのコードを追加すれば、対応以外のバージョンも利用できます。

Font Awesomeを使うための準備

Font Awesomeを使うためには以下の2通りの方法があります。
※デフォルトでFont Awesome読み込むテーマの場合、この手順は必要ありません。

  1. CDN(Content Delivery Network)を使う
  2. サーバーにアイコンデータをアップロード
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の部分を最新バージョン番号に書き換える必要があります。


<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 Awesomeの使い方

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

Font Awesomeの使い方

Cocoonでは、ブログカードやアイコンリスト等、フォントアイコンが随所に使用されていますが、新旧バージョンに共通のアイコンを使っているためか、設定でVer4からVer5に切り替えても、問題なく表示されます。

Font Awesomeの使い方

Font Awesome5を使う場合でご紹介します。
旧バージョンの場合もほぼ同様にできます。

①必要なアイコンを探す

Font Awesome5の場合の手順です。(旧バージョンも同様です。)

まず、Font Awesome5のアイコン一覧から目的に合ったアイコンを探します。

左側で種類を選べます。無料で探す場合は、Freeを選択します。

Font Awesomeの使い方

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

アイコン(laugh)の例

選んだアイコンをクリックすると以下のように表示されます。

左上に表示させるために必要なコードが載っています。

右側に、アイコンのスタイル別の一覧があり、「PRO」とあるのが有料です。
この例では、無料だと「SOLID」「REGULAR」の2種類が利用でき、画像は「REGULAR」が選択されています。

Font Awesomeの使い方
Font Awesome5

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

Font Awesomeの使い方
Font Awesome5

HTMLは <i class="far fa-laugh"></i> 
Unicode(ユニコード)は f599 ※後述のCSSの疑似要素で使います。

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

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

ブロックエディタ―の場合は、カスタムHTMLブロックに貼ります。
クラシックエディターの場合は、テキストエディターに貼ります。

Font Awesomeの使い方
カスタム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】<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>
表示例
⇒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】<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>
表示例
⇒ サイズ指定なし  ⇒ 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 Awesomeの使い方

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)にアイコンを追加した例です。

Font Awesomeの使い方

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

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> /*点滅*/
表示例
跳ねる     レンチ風   点滅  
「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時)のみ動かすこともできます。
animatedanimated-hoverに書き換えます。

<i class="fas fa-bell faa-ring animated-hover"></i>
表示例
カーソルを乗せてみてください

詳しくは Font Awesome Animation をご覧ください。

まとめ

FontAwesomeの使い方の解説は以上です。

テーマであらかじめ用意されているフォントアイコンを使っている方も多いと思いますが、HTMLコードとクラスの使い方を覚えたら、目的や好みに合った、より幅広いアイコンが選択でき、表現の幅が広がります。

タイトルとURLをコピーしました