WordPressでアイコンフォント(Font Awesome)が表示されなくてハマったときの対処

公開日: 更新日: Wordpress



今回のオリジナルテーマ作成で1つハマったことがあります。それはアイコンフォント(Font Awesome)の表示。

FacebookやTwitterのシェアボタンを設置するのにネット上で紹介されている方法をコピペして表示させ、無事に完了!!

で次に行ったのがコメント欄拡張プラグインの導入。

あれ??今まで表示されていたシェアボタンのアイコンフォントが□になっちゃった(困)。

でコメント欄拡張プラグインのほうにあったアイコンフォントのオフ設定をしたら復活!!まあいいや!でそのままにしていましたが、これって不具合ですよね~~って感じ。

どうしても解決したかったのでいろいろ調べたら、公式サイトにヒントがありました。無事解決~~ということで同じ現象で困っている方の参考になれば幸いです。

原因はFont Awesomeのバージョン

公式サイトでは

最新の情報しか掲載されていません(どこかにあるのでしょうけど探し当てられませんでした)。

要はバージョン4.xと5.xで記述方法が大きく変わったということです。

WordPressの場合今使用しているテーマでアイコンフォントが表示されているのに、自身で追加したものだけ表示されなかったり□になるという方はこの確認をするだけで一発解決できます。

管理画面から「外観」→「テーマの編集」を開き「テーマヘッダー(header.php)」を開いてください。

その中に以下のような記述があると思います。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.x.x/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.x.x/css/all.css" integrity="…….." crossorigin="anonymous">

じっと見ていただければわかると思いますが上がバージョン4.x.x、下がバージョン5.x.xです。

恐らく新しめのテーマを使用している場合は下の記述があろうかと思います。

困ったことにこのバージョンによって、アイコンフォントの表記方法が違うので、□になったり表示されなかったりするのです。

テーマや記事本文などに記述する場合の違い

アイコンフォントをテーマ内のファイルや記事本文などに表示させるときは、例えばFacebookのアイコンフォントなら

<i class="fa fa-facebook"></i>
と記述すれば表示されるはず・・・ですが、バージョン5.xの場合は
<i class="fab fa-facebook"></i>
と記述しないと表示されません(□になります。)

つまり「fa 〇〇」だったのが「fab 〇〇」に変わったんですね。この「fab」という文字列はそれ以外にもあって、アイコンフォントによってさまざまですので正しいものは

の公式サイトから検索すると確実です。

CSSに記述する場合の違い

同じくFacebookの場合、CSSにアイコンフォントを使うには

font-family: "Font Awesome;
	font-weight: 900;
	content: "\f09a";
  margin-right: 5px;
と記述するのですが、バージョン5.x.xになると
font-family: "Font Awesome 5 Free"
	font-weight: 900;
	content: "\f09a";
  margin-right: 5px;
とfont-familyの記述が変わります。これを環境に合わせないと表示されないということなんですね。


こんな感じでバージョン5から有料版ができた関係(だと思う)で記述が変更になりましたので、ハマった方は試してみてください。私の場合はすっきり解決しました。

※バージョン4.x.xは将来的に使えなくなる可能性が高いですし、プラグインでアイコンフォントを使っているものは5.x.xに対応していきますから、5.x.xが使用できるようにしておくといいでしょう。

CSSで指定する場合の違い

CSSでアイコンフォントを使用する場合には上のように

font-family: "Font Awesome 5 Free"
	font-weight: 900;
	content: "\f09a";
  margin-right: 5px;
とバージョン5では記述しますが、バージョン4の場合でどこかからコピペしたときなんかは
font-family: "Font Awesome;
	font-weight: normal;
	content: "\f09a";
  margin-right: 5px;
なんて書かれているときがあります(どこが違うかわかるかな??)

ハマりポイントはズバリfont-weight値の指定。バージョン4ではnomal,boldなどが指定できたようですが、バージョン5では数値で記述しないといけないようです。

あまりなじみがないですが、
normal=400
bold=900
と単純に理解しておけば大抵問題はないでしょう。きちんとやったのに反映されないという方はチェックしてみてください。

プラグインとの競合

最後にハマったのが特定プラグインの設定との競合。私の場合はコメント欄を拡張する「wp Discuz」というプラグインでした。

このプラグインには競合対策として「コメント」→「Wp Discuz」→「Settings」→「Styles」の中にアイコンフォントをwp Discuz独自の設定にするか?という項目があり、これをオフにすると問題解決しました。

このプラグインのように設定がある場合はいいのですが、設定のないプラグインはどうしたらいいんでょ?という話にはなってしまいますが、何かプラグインを有効化したら今まで表示されていたアイコンフォントが表示されなくなった場合には一旦プラグインを停止してみるなりしてチェックするといいでしょう。

おまけ アイコンフォントを内製化しよう

アイコンフォントはバージョン5の場合

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.x.x/css/all.css" integrity="…….." crossorigin="anonymous">
とheader.phpのスタイルシート読み込みコード付近に記述すれば外部リンク経由で都度読み込んでくれますが、速度対策(それほど影響はないものの・・・)を少しでもするために内製化してしまいましょう。

へ行き、赤枠で囲まれたところをクリックします

ダウンロードをクリックします

「Web用の素晴らしいフォント」をクリックしてダウンロードします

ダウンロードしたら解凍しましょう。

アイコンフォントとして使用するのは解凍したフォルダの中にある「css」というフォルダのみです。これを稼働しているテーマへアップロードします(すでにテーマ内に「css」というフォルダがある場合がありますから「ifont-css」など別名にしておきましょう)

※子テーマを使っている場合は親テーマへアップロードします

「ifont-css」という名前でアップロードしたなら、テーマのheader.cssの今までアイコンフォントの読み込みコードがあった場所のすぐ下へ以下のように記述します

<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri() ?>/ifont-css/fontawesome.min.css" />
これでテーマの中のアイコンフォントに関するファイルが読み込まれるようになります。

試しに外部から読み込んでいるコード

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.x.x/css/all.css" integrity="…….." crossorigin="anonymous">
を念のためメモ帳などにコピーした上でテーマファイルを更新し、きちんとアイコンフォントが表示されるか確認してください。

うまくいったら大成功!!内製化は終了です。

※もしもこの措置以前にきちんとアイコンフォントが表示されていない場合はこれをしてしまうとさらに混乱するかもしれないので、必ずきちんと表示される状態で内製化は行うようにしましょうね。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)