WordPressのテーマでSNSの拡散ボタンやフォントボタンに使われているアイコンは、FontAwesomeを使って表示しているものが多いです。
しかしサイトをチェックしていると「□」になってしまっていることもちらほら。
いわゆる文字化けです。
以下は私自身の経験から、アイコンのお豆腐化現象の原因として考えられる２つの例について記してみます。
ちなみに文字化けはインターネット（老人会）スラングで「豆腐」と呼ばれます。
【2020/2/20全面改訂】
原因１ Chromeに入れた拡張機能プラグイン
FontAwesomeは画像ではなくフォントです。
そのため、
かようなプラグインの例としては、
強制メイリオちゃん
Stylus
などが挙げられます。
文字フォントではFontAwesomeのアイコンに対応できないので文字化けを起こすわけです。
強制メイリオちゃんなんかは名前からも納得しやすいのではないでしょうか？
トラブルシューティングの方法は、
ちゃんと表示されればChromeの拡張機能が原因として考えられます
自サイトも他サイトも文字化けしている場合もこの可能性が高いです
ちなみに、この２つのプラグインは実際に私が食らってしまったもの。
プラグインが異なるとはいえ、同じ失敗を繰り返すとは。
原因２ サイト側がFontAwesomeの設定を間違えている
あるいは一部のアイコンだけが文字化けしている場合
これらは、サイト側がFontAwesomeの設定を間違えている可能性があります
特にFontAwesomeのバージョン４と５の違いにまつわるトラブル。
４と５でアイコンの名前は変わりました。
例えばTwitterですと、
FontAwesome４ fa fa-twitter
FontAwesome５ fab fa-twitter
ブランドアイコンのbがつくようになりました。
結構、これに気づいていない場合があるんです。
５を使っているのにfaで指定していたり、あるいは逆だったり。
４を使っていて５に移行したいとします。
Search Regexというプラグインを入れてください。
起動して「fa- fa」で検索を掛けると、記事内で使っているバージョン４のFontAwesomeが並びます。
どのアイコンを使っているかをチェックして、今度はそのアイコン名で検索してリライトします。
twitterなら「fa fa-twitter」で検索、「fab fa-twitter」に一括でリライトできます。
この作業を繰り返します。
テーマについては制作者の側で対応するはずですから、自分のカスタマイズしたところだけ直せばいいです。
そんなに多くないはずですから、ファイルをいちいち検索するよりサイトを直接見た方が早いと思います。
なおSearch Regexは、使うとエラーが「サイトで技術的な問題が発生しています」というメールが来ます。
正常に変換されているのでそのまま使っても構わないのですが、エラーを修正したい方は以下の記事が参考になります。
結論
そこさえできれば対処の目処を立てられるので
コメント