Font Awesome 5 Free がGoogle Chrome で表示されない というご相談を頂きました。
目次
Font Awesomeがchomeに表示されない
こんにちは。
突然の質問失礼致します。
safariであればアイコンが表示されるのですが、
chomeになるとアイコンが文字化けしてしまいます。
どのようにすれば直るのでしょうか？
教えていただければ幸いです。
よろしくお願いします。
考えられる原因
＞やっちゃん さま
ご相談ありがとうございます！
CSSの記述の問題かな～と確認してみましたが問題なさそうですね･･･
これが直接的な原因かはわかりませんが、
http://【YOUR SERVER ID】.sakura.ne.jp/wp/
にアクセスしたところ、アイコンは表示されました。
F12で開発者ツールを使うと、同様にサーバードメイン http://【YOUR SERVER ID】.sakura.ne.jp/wp/ で始まるソースの読み込みにエラーが出ています。
これはWordPressの問題というよりはブラウザの仕様による所が大きいと思いますが、独自ドメインとサーバードメインが異なる事によって起こっている可能性があります。（他のブラウザでは問題なかったが、Chromeだとエラーとして扱ってしまっている状態）
おそらく、WordPressアドレスとサイトアドレスが異なるものに設定されているのではないでしょうか。
WordPressアドレスがサーバーのドメイン
サイトアドレスに独自ドメイン
が設定されているのかもしれません。
WordPressの場合こういった設定はプレビューができなくなるなど様々な不具合の原因になることがあります。
特別な理由があってこのような設定にしているので無ければ、アドレスを統一することでエラーが解消できるかもしれません。
WordPressアドレスの変更を行う場合は注意して下さい。設定に誤りがあると管理画面にもアクセスできなくなる可能性があります。DBのバックアップを取ることはもちろんですが、こちらの記事で復旧方法も解説しているので参考にして下さい。
WordPressのURL設定を変更したら404エラーになってしまった
他、これまで記事中にメディアを追加していた場合、サーバーアドレスのパスが利用されているはずです。これらはさくらサーバーにいる間は問題はありませんがSSL対応やサーバー移転の際にエラーとなるので記事中のURLも独自ドメインに変更する形がベターです。
もちろん代行作業も可能ですので気軽にご相談ください。
他の方法
ソースの読み込みにWordPressアドレスが使われている点から、FontAwesomeはプラグインで導入されているのでしょうか。
その場合、必要なCSSやJSファイルを手動で独自ドメインに直す（プラグインを停止してヘッダーに自分で記述する）ことで解消できる可能性もあります。
まずはサイトのコードを確認し、sakura.ne.jpで読み込まれているFontAwesome5の記述を確認してみましょう。
参考にして頂ければ幸いです。