お知らせ「WEXAL導入およびテーマ変更作業に伴う不具合について」

FontAwesomeのアイコンが「□(豆腐)」になったら? ~サーバーとローカルの対処法【WordPress】

カスタマイズ&プラグイン
この記事は約4分で読めます。
スポンサーリンク

質問者の写真

SNSのアイコンが文字化けして「□」になっちゃう!
 

WordPressのテーマでSNSの拡散ボタンやフォントボタンに使われているアイコンは、FontAwesomeを使って表示しているものが多いです。
しかしサイトをチェックしていると「□」になってしまっていることもちらほら。
いわゆる文字化けです。
以下は私自身の経験から、アイコンのお豆腐化現象の原因として考えられる2つの例について記してみます。

ちなみに文字化けはインターネット(老人会)スラングで「豆腐」と呼ばれます。

質問者の写真

見た目お豆腐だもんね……
 

【2020/2/20全面改訂】

スポンサーリンク

原因1 Chromeに入れた拡張機能プラグイン

FontAwesomeは画像ではなくフォントです。
そのため、

解答者の写真
Chromeに拡張機能プラグインで特定フォントの強制をしている場合、その影響を受けてしまいます

かようなプラグインの例としては、

強制メイリオちゃん

強制メイリオちゃん
Google Chrome用 拡張機能です。 メイリオでの表示を強制します。 MSゴシック系フォントで文章を読むと目が痛い、頭が痛いという方、お試しください。

Stylus

Stylus
Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

などが挙げられます。

文字フォントではFontAwesomeのアイコンに対応できないので文字化けを起こすわけです。
強制メイリオちゃんなんかは名前からも納得しやすいのではないでしょうか?

トラブルシューティングの方法は、

解答者の写真
お豆腐に出くわしたら、シークレットモードや(拡張機能を入れていない)他のブラウザで見てください
ちゃんと表示されればChromeの拡張機能が原因として考えられます
自サイトも他サイトも文字化けしている場合もこの可能性が高いです
 

ちなみに、この2つのプラグインは実際に私が食らってしまったもの。
プラグインが異なるとはいえ、同じ失敗を繰り返すとは。

質問者の写真

学ばないね~
 
解答者の写真
対処法は、シンプルにフォントの強制をしないことです
 
スポンサーリンク

原因2 サイト側がFontAwesomeの設定を間違えている

解答者の写真
逆に、どのブラウザから見ても文字化けしている場合
あるいは一部のアイコンだけが文字化けしている場合
これらは、サイト側がFontAwesomeの設定を間違えている可能性があります
 

特にFontAwesomeのバージョン4と5の違いにまつわるトラブル。

4と5でアイコンの名前は変わりました。
例えばTwitterですと、

FontAwesome4 fa fa-twitter

FontAwesome5 fab fa-twitter

ブランドアイコンのbがつくようになりました。

結構、これに気づいていない場合があるんです。
5を使っているのにfaで指定していたり、あるいは逆だったり。

解答者の写真
自分のサイトについて発生している分には、「記事」に限定ですが、使っているFontAwesomeアイコンをリストアップする方法があります。
 

4を使っていて5に移行したいとします。
Search Regexというプラグインを入れてください。

Search Regex
Search Regex adds a powerful set of search and replace functions to WordPress posts, pages, custom post types, and other data sources.

起動して「fa- fa」で検索を掛けると、記事内で使っているバージョン4のFontAwesomeが並びます。
どのアイコンを使っているかをチェックして、今度はそのアイコン名で検索してリライトします。
twitterなら「fa fa-twitter」で検索、「fab fa-twitter」に一括でリライトできます。
この作業を繰り返します。

テーマについては制作者の側で対応するはずですから、自分のカスタマイズしたところだけ直せばいいです。
そんなに多くないはずですから、ファイルをいちいち検索するよりサイトを直接見た方が早いと思います。

なおSearch Regexは、使うとエラーが「サイトで技術的な問題が発生しています」というメールが来ます。
正常に変換されているのでそのまま使っても構わないのですが、エラーを修正したい方は以下の記事が参考になります。

Search Regex使用時に「サイトで技術的な問題が発生しています」というエラーメールが届くときの解決方法 – Naifix
WordPressプラグインSearch Regexを使ったあと「Uncaught Error: Call to undefined method SearchRegex::base_url() in~」というエラーメッセージが届く場合の解決策を2つご紹介します。
スポンサーリンク

結論

解答者の写真
FontAwesomeが文字化けしちゃっていたら、状況でローカルとサーバーのどちらに原因があるか切り分けてみてね
そこさえできれば対処の目処を立てられるので
 
タイトルとURLをコピーしました