WordPressのテーマでSNSの拡散ボタンやフォントボタンに使われているアイコンは、FontAwesomeを使って表示しているものが多いです。
しかしサイトをチェックしていると「□」になってしまっていることもちらほら。
いわゆる文字化けです。
以下は私自身の経験から、アイコンのお豆腐化現象の原因として考えられる2つの例について記してみます。
ちなみに文字化けはインターネット(老人会)スラングで「豆腐」と呼ばれます。
【2020/2/20全面改訂】
原因1 Chromeに入れた拡張機能プラグイン
FontAwesomeは画像ではなくフォントです。
そのため、

かようなプラグインの例としては、
強制メイリオちゃん
Stylus
などが挙げられます。
文字フォントではFontAwesomeのアイコンに対応できないので文字化けを起こすわけです。
強制メイリオちゃんなんかは名前からも納得しやすいのではないでしょうか?
トラブルシューティングの方法は、

ちゃんと表示されればChromeの拡張機能が原因として考えられます
自サイトも他サイトも文字化けしている場合もこの可能性が高いです
ちなみに、この2つのプラグインは実際に私が食らってしまったもの。
プラグインが異なるとはいえ、同じ失敗を繰り返すとは。

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

あるいは一部のアイコンだけが文字化けしている場合
これらは、サイト側がFontAwesomeの設定を間違えている可能性があります
特にFontAwesomeのバージョン4と5の違いにまつわるトラブル。
4と5でアイコンの名前は変わりました。
例えばTwitterですと、
FontAwesome4 fa fa-twitter
FontAwesome5 fab fa-twitter
ブランドアイコンのbがつくようになりました。
結構、これに気づいていない場合があるんです。
5を使っているのにfaで指定していたり、あるいは逆だったり。

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

起動して「fa- fa」で検索を掛けると、記事内で使っているバージョン4のFontAwesomeが並びます。
どのアイコンを使っているかをチェックして、今度はそのアイコン名で検索してリライトします。
twitterなら「fa fa-twitter」で検索、「fab fa-twitter」に一括でリライトできます。
この作業を繰り返します。
テーマについては制作者の側で対応するはずですから、自分のカスタマイズしたところだけ直せばいいです。
そんなに多くないはずですから、ファイルをいちいち検索するよりサイトを直接見た方が早いと思います。
なおSearch Regexは、使うとエラーが「サイトで技術的な問題が発生しています」というメールが来ます。
正常に変換されているのでそのまま使っても構わないのですが、エラーを修正したい方は以下の記事が参考になります。

結論

そこさえできれば対処の目処を立てられるので
コメント