【最新】FontAwesomeのアイコンが表示されないときの対処法

solabot

どうも、あきらめない！がモットーのsolabotです。

今やアイコンフォントでおなじみの「FontAwesome」ですが、アイコンが表示されないときがありませんか？

単純ミス？実はcocoon使ってる？など原因はさまざま。

この記事では、FontAwesomeのアイコンが表示されないときの対処法を説明しています。

FontAwesomeについて

FontAwesomeとは？

FontAwesomeはWEBページ上で文字と同じように利用できるアイコンのことです。

画像アイコンと違って、拡大してもぼやけることもなく、色やサイズが簡単に変更できる便利なアイコンです。

基本的な利用方法

使用方法の基本は理解されている方が多いと思うので、表示されない原因にも繋がることだけざっくりと説明します。

FontAwesomeを利用するには事前準備が必要です。

①CDNを使う

ざっくり言うと、FontAwesomeが用意している倉庫に置いてあるアイコンを借りてそのまま使うというパターン。

「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みです。

自分のサーバーにデータをアップロードする必要がないので、手間もなく、サーバーへの負荷も減らせます。

利用するには、事前に以下のコードをコピーしてサイトのheadタグ内に貼り付けます。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

②サーバーにデータをアップロード

こちらは自分のサーバーにアイコンフォントのデータをアップロードして使う方法です。

この記事では解説は省きます。

FontAwesomeの使い方

事前準備が済んでいれば、使い方はとても簡単です。

公式ページから好みのアイコンを見つけます。

FontAwesome

アイコンをクリックすると、詳細画面に移動するので、アイコン上部のコードをコピーして、記事内に貼り付ければ利用可能です。

FontAwesomeが表示されない原因と対策

CDNコードが正しく貼れていない

上記で説明したとおり、自分のサーバーにデータをアップロードではなく、CDNを利用する場合は、専用のコードをheaderタグに貼り付ける必要があります。

CDNのコードが正しく貼り付けられていない場合に表示されないことがあります。

その際、貼り付け位置やコードの内容に間違いがないか今一度確認してみてください。

間違いがなければ別の原因です。

プロ版を利用しようとしている

色が薄くなっているのはプロ版です。

有料の為、支払いをしていない場合は、ウェブページ上で正しく表示されません。

ワードプレステーマCocoonを使用している

これは盲点かもしれません。

Cocoonは無料のワードプレステンプレートの中でも相当優れたテンプレートで、あらゆる機能が最初から搭載されています。

実は、Cocoonを使えば、CDNなど抜きにして、コードを貼り付けるだけでいきなりFontAwesomeが利用できてしまいます。

最初からその機能も準備済みというわけです。

しかし、利用する際に設定に気をつけなければいけません。

設定するにはワードプレスの管理画面左メニューから「Cocoon 設定」にマウスを乗せて、さらに表示されたメニューから「Cocoon 設定」をクリック。

設定画面の上部に並んだタブから「全体」を選択。

全体設定の中段ほどにある、「サイトアイコンフォント」という項目に「Font Awesome 4」、「Font Awesome 5」の2種類があり、使用するFont Awesomeのバージョンを設定できます。

バージョンが誤って選択されていると、正しくアイコンが表示されないことがあります。

CSSで利用時に表示されない

FontAwesomeはHTML形式だけでなく、CSSとしても利用可能です。

使い方の基本は、指定したClassなどにFontAwesome用のCSSを当てるだけです。

「before:」などの擬似要素で使われることが多いです。

使い方は以下の通り。

【HTML】
<p>これは<span class="dog">犬のアイコン</span>です。</p>

【CSS】
.dog:before {
font-family: "Font Awesome 5 Free";
content: '\f6d3';
font-weight: 900;
}

これは犬のアイコンです。

※WEBサイトの特性上「￥」円記号で表示されていますが、バックスラッシュと同じ意味です。

font-familyの指定

font-familyはアイコンのバージョンに合わせて入力が必要です。

この場合、5.12.0ということからVersionが5なので、font-familyは「”Font Awesome 5 Free”」と設定します。

これが違っていると表示されません。

font-family: FontAwesome;

contentの指定

contentはそのクラスに何を表示させるか決めることができるので、アイコンに表示されている「f6d3」を入力します。

このときに、コードの前に「バックスラッシュ（＼）」をつけます。

これを間違えても表示されません。

font-weightの指定

FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。

Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。

これが意外と盲点で、白抜きのアイコンにしたいのに塗りつぶしが出てしまう（逆もある）などは、このfont-weightの指定を間違えているとおきます。

ブランド系アイコンのfont-family

ブランド系のアイコンとは、TwitterやFacebookといった企業などの公式アイコンです。

これらを利用する場合は、CSS内の「font-family」を「Font Awesome 5 Brands」とする必要があります。

これを間違えているとやはり表示されません。

【HTML】
<p>これは<span class="twitter">ツイッター</span>です。</p>

【CSS】
.twitter:before {
font-family: "Font Awesome 5 Brands";
content: '\f099';
}

これはツイッターです。

FontAwesomeのアイコンフォントが表示されない原因は主に以下の通りです。

まとめ

FontAwesomeでアイコンが表示されない場合は、上記のような設定のミスが考えられます。

ワードプレステーマのCocoon設定ミスなどは、かなり盲点になるので注意しましょう。

CSSでの利用も大変便利ですが、font-familyやfont-weightの指定ミスで表示されないこともあります。

アイコンフォントが表示されない場合、該当する内容がないか確認してみましょう。