WordPressにFont Awesomeが表示されない原因を調べてみた

アイコンフォントがカンタンに表示できたら、あっという間にオシャレでカワイイ雰囲気のブログになりますよね。しかし、自分でカスタマイズしているとなかなかうまく表示されないと思います。今回はワードプレスの無料テーマを使いながらも、Font Awesomeを導入しているブログ初心者のもなか(ruby443n)が、表示方法を解説していきます。

Font Awesomeとは?

WEBサイトやブログなどでWebアイコンフォント(アイコン画像)を表示できるようにしてくれるサービスです。

使用準備

参考サイトFont Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

今回はこちらを主な参考とさせて頂きました。また、ラシュリエオンラインサロンで質問に答えてくれた方、ツイッターで助けてくれた方、本当にありがとうございました。

headタグ内にコードを貼付ける

●●●
もなか

こちらSVG置換する場合を参考にしました。

上記コードを[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]⇒〜の中に貼り付けました。

●●●
もなか

一度Webフォントでチャレンジしてみましたがなかなか表示されなかったので今回WebフォントではなくSVG画像形式でアイコン表示させています。

リストにアイコン表示させてみる

●●●
もなか

ブログ内のリストの・部分をに変えています

  • サンプル
  • サンプル
  • サンプル

なかなか表示されなかった

ほんとに苦労しました。恥ずかしいですがボロボロだった状況をごらんください。

もくじのなかに表示されてしまった

●●●
もなか

記事のなかのリスト全体にCSS指定をしてしまっていました…

表示されてもアイコンが文字色で表示されてしまう&文字間隔がおかしい

●●●
もなか

一旦は表示されて喜びましたが、ん?なんか変。やっぱりちゃんと表示したいです。

表示されない原因

デベロッパーツールをキャッシュ削除ツールとしてしか使用してなかったことが原因でした。ちゃんと検証することでリスト内の【svg-inline–fa 】にcss指定することでちゃんと自分の思った通りの表示ができるようになりました。

●●●
もなか

原因がこんなに簡単にわかるなんて…デベロッパーツール便利ですね!

今回のCSSコード

上記リストのcssコードです。あ、emとpxが混ざってる…

まとめ

かなり苦労しましたがキチンと表示されたときはほんとにうれしいです。まだまだ他にも改善したいところだらけなので挑戦は続きます…