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

この記事は約4分で読めます。

2015-04-30WordPressカスタマイズ

質問者の写真

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

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

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

質問者の写真

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

【2020/2/20全面改訂】

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

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

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

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

強制メイリオちゃん

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というプラグインを入れてください。

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

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

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

結論

解答者の写真
FontAwesomeが文字化けしちゃっていたら、状況でローカルとサーバーのどちらに原因があるか切り分けてみてね
そこさえできれば対処の目処を立てられるので
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴