Font Awesomeのアイコンが「□（豆腐）」になって表示されない場合の対処法　～サイト訪問者・サイト管理者の双方に対応

2015.04.302024.09.21

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

記事内に広告が含まれています。

SNSのアイコンが文字化けして「□」になってる！

サイトを訪問してこんな現象に出くわしたことはありませんか？
あるいはサイトを運営していて悩んだことはありませんか？

こうした文字化けはネットスラングで「豆腐」と呼ばれています。
見た目がお豆腐ですから。
ただ現在では死語に近いので、使ってる人はインターネット老人会に属しています（私も含めて）。

本稿では豆腐の発生する原因と対処法について説明します。
サイト訪問者・サイト管理者のどちらにも対応しています。

【2024年9月21日全面改稿】

豆腐が発生する原因
原因の切り分け
訪問者が原因の場合
サイト側が原因の場合
まとめ

豆腐が発生する原因

一言で、

文字化けです

多くのサイトにおいて、SNSの拡散ボタンなどのアイコンはFont Awesomeで表示されています。
Font Awesomeは画像ではありません。
その名の通りフォントの一種です。
それゆえに様々な原因で文字化けが引き起こされます。

原因の切り分け

豆腐はサイト訪問者・サイト管理者のどちらの原因でも起こりえます。
そのため、まずはどちらに問題があるか切り分ける必要があります。

切り分ける方法は、

Chromeのシークレットウィンドウから該当のページにアクセスし直します。

これで正しく表示される場合は訪問者の環境に原因があります。

正しく表示されない場合は、さらに次の手段を講じます。

拡張機能を全てオフにした上で、シークレットウィンドウからアクセスし直す。

拡張機能プラグインの中にはシークレットウィンドウでも適用させるオプションを持つものもあるためです。
（オフがデフォルトだとは思いますが念のためです）
これで正しく表示されるなら、やはり訪問者の環境に原因があります。

以上の手段によっても豆腐のままの場合はサイト側に原因があります。

訪問者が原因の場合

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

Chromeに拡張機能プラグインで特定フォントの強制をするとFont Awesomeも影響を受けます。

かようなプラグインの例としては「（旧）強制メイリオちゃん」や「Stylus」が挙げられます。
文字フォントではFontAwesomeのアイコンに対応できないので文字化けを起こすわけです。

ちなみに、この２つのプラグインは私に生じたケースでもあります。
プラグインが異なるとはいえ同じ失敗を繰り返すとは……。

ただし「（旧）強制メイリオちゃん」は「部分強制メイリオちゃん」に転生を遂げています。
適用させるフォントを限定することでFont Awesomeに影響が及ばないよう工夫しています。

サイト側が原因の場合

１　単純な記述ミス

まず、単純にコードの記述ミスをしている可能性があります。
Chromeなら該当箇所を選択して右クリック。
「検証」でチェックしてみてください。

２　FontAwesomeの４と５のフォント名を間違えて記述している

FontAwesomeのバージョン違いのコードを記述しているケースが考えられます。
4と5（恐らく6も）の間で起こりえます。

例えばTwitterのケース。

FontAwesome４　fa fa-twitter
FontAwesome５　fab fa-twitter

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

このミスは案外あります（当サイトも含めて）

４を使っていたサイトが５に移行すると高確率でどこかに問題が生じます。
テーマが管理する部分は自動で変えてくれます。
しかし独自カスタマイズを施した部分は自分で直さなければいけません。
その過程で見落としてしまうんです。

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

ただ、独自カスタマイズの場所はそんなに多くないはず。
ざっと眺めた後は自分で直接直した方が早いと思います。