ブログをリニューアルしました!こちらより

【WordPress】SSL化したらFontAwesomeが表示されない

こんばんは。今回はWordPressについての備忘録として記事にしたいと思います。
2018年7月からGoogleは、https化していないサイトはURLの左側に「保護されていません」と表示するようにしました。
参考サイトは以下より。

参考 Google ウェブマスター向け公式ブログGoogle

レンタルサーバーはロリポップを使用しており、SSL化が無料で出来るということで実際にSSL化を実施しました。

しかし、いつかのタイミングでFontAwesomeのアイコンの表示が「□」マークで表示されるようになってしまいました。

当時FontAwesomeという言葉も知らなかった私はグーグルで「アイコン □ 表示される」等で検索し、解決方法を探りました。

見つけた解決方法①:ヘッダーファイルにFontawesomeを直接読み込むようにlinkタグを追加する。
⇒ 追加したが、直らなかった。

見つけた解決方法②:レンタルサーバーと、ドメイン取得した所を同じにしてみる。
⇒ レンタルサーバーはロリポップ、ドメインはエックスサーバーでした。ドメイン管理を「ムームードメイン」へドメイン移管したが、結局変化無し。

上記の2点を試しましたが、アイコンはまだ「□」表示のままでした。

結局、原因は何だったのか?

どうやらStyle.cssのFontAwesomeの部分でfont-familyの設定が一部だけされていない部分があったことによるものでした。

どのタイミングで消されたのか分かりませんが、以下のように
font-family: FontAwesome;
を追加したところ、アイコンが正しく表示されるようになりました。

以下のコードはトップページスライドバーのタイトル前のアイコンの設定部分です。

style.css(修正前)

}
        .sidebar .my_popular_posts .widgettitle:before {
         content: "\f201";
}

style.css(修正後)

}
	.sidebar .my_popular_posts .widgettitle:before {
	 content: "\f201";
	 font-family: FontAwesome;
	}

正しく表示できました!

まとめ

今回の問題を通して、FontAwesomeを使用する際は、font-familyの設定が必要であることが分かりました。私のようにCSSを知らない初心者の場合、アイコンが正しく表示されないとかなり焦ると思いますが、まずはFont-familyの設定を確認するようにしましょう!

おわり!