SNSのアイコンが文字化けして「□」になってる！
サイトを訪問してこんな現象に出くわしたことはありませんか？
あるいはサイトを運営していて悩んだことはありませんか？
こうした文字化けはネットスラングで「豆腐」と呼ばれています
見た目がお豆腐ですから。
ただ現在では死語に近いので、使ってる人はインターネット老人会に属しています（私も含めて）。
本稿では豆腐の発生する原因と対処法について説明します。
サイト訪問者・サイト管理者のどちらにも対応しています。
【2024年9月21日全面改稿】
豆腐が発生する原因
一言で、
Font Awesomeなどのアイコンフォントが正しく表示されていない状態です
多くのサイトにおいて、SNSの拡散ボタンなどのアイコンはFont Awesomeで表示されています。
Font Awesomeは画像ではなく「アイコンフォント」です。
そのため通常の文字フォントと同じく、読み込み失敗やフォント置換の影響を受けます。
原因の切り分け
豆腐はサイト訪問者・サイト管理者のどちらの原因でも起こりえます。
そのため、まずはどちらに問題があるか切り分ける必要があります。
豆腐の原因を切り分ける方法その1：
Chromeのシークレットウィンドウから該当のページにアクセスし直します。
これで正しく表示される場合は訪問者の環境に原因があります。
正しく表示されない場合は、さらに次の手段を講じます。
豆腐の原因を切り分ける方法その2：
拡張機能を全てオフにした上で、シークレットウィンドウからアクセスし直します。
拡張機能プラグインの中にはシークレットウィンドウでも適用させるオプションを持つものもあるためです。
これで正しく表示されるなら、やはり訪問者の環境に原因があります。
以上の手段によっても豆腐のままの場合はサイト側に原因があります
訪問者が原因の場合
Font Awesomeは画像ではなくフォントです。
そのため、
ちなみに、
私もやらかしました……しかも2回繰り返しました……
サイト側が原因の場合
１ 単純な記述ミス
まず、単純にコードの記述ミスをしている可能性があります。
Chromeなら該当箇所を選択して右クリック。
「検証」でチェックしてみてください。
２ FontAwesomeの４と５のフォント名を間違えて記述している
FontAwesomeのバージョン違いのコードを記述しているケースが考えられます。
4と5（恐らく6も）の間で起こりえます。
例えばTwitterのケース。
- FontAwesome４ fa fa-twitter
- FontAwesome５ fab fa-twitter
ブランドアイコンのbがつくようになりました。
このミスは案外あります。
４を使っていたサイトが５に移行すると高確率でどこかに問題が生じます。
テーマが管理する部分は自動で変えてくれます。
しかし独自カスタマイズを施した部分は自分で直さなければいけません。
その過程で見落としてしまうんです。
やっぱり私も4から5に移行したときはやらかしました
見落とし対策について。
記事内に限ってならプラグインSearch Regexが使えます。
「fa- fa」で検索を掛けると、記事内で使っているバージョン４のFontAwesomeが並びます。
どのアイコンを使っているかをチェックして、今度はそのアイコン名で検索してリライトします。
twitterなら「fa fa-twitter」で検索、「fab fa-twitter」に一括でリライトできます。
この作業を繰り返します。
ただ、独自カスタマイズの場所はそんなに多くないはず。
ざっと眺めた後は自分で直接直した方が早いと思います。
３ Font Awesomeを非同期で読み込んでいる
Font Awesomeを非同期で読み込んでいる可能性もあります。
Font AwesomeはCSSとフォントファイルの読み込み順に依存するため、非同期化・遅延読み込み・最適化系機能との相性問題が起こることがあります。
もちろん対処法は、
非同期読み込みを止めてください
もちろん読み込み順を調整してもOKです。
しかしそれがわかる方なら、この記事を読んでいないと思います。
４ Xのアイコンが鳥マークのままになっている
豆腐ではありませんが、Xのアイコンが鳥マークのままのケースもあります。
Font Awesome4や古い5系環境だとTwitter→X変更に追従できていないことがあるためです。
少なくともCocoonについてはテーマでXアイコンを用意してくれています。
なのでCocoonの最新版にアップデートすれば大部分に適用されます。
（ウィジェットなどを含む）独自カスタマイズ部分については自分で修正してください。
５ テーマのアップデートが正しく適用されていない
「テーマをアップデートしたはずなのに表示されない！」あるいは「テーマをアップデートしたら表示されなくなった！」。
実はこういう現象もあるんです。
理由は、
テーマのアップデートがきちんとあたっていないためです
私のケースでは、Cocoonのアップデートがあたっていませんでした。
Cocoonに問題があるのか、WordPressに問題があるのか、キャッシュその他に問題があるのか。
理由はわかりませんが、過去に2回あります。
対処法は、テーマのアップデートを手動でやり直します
以下はCocoonの場合です。
公式からファイルをダウンロードし、手動でサーバーにアップロードして更新します。
「WordPress管理画面サイドバーの外観→テーマ→新規追加→テーマのアップロード→（ローカルから）ファイルを選択→インストール」の手順となります。
確認を促されますが続行します。
もしうまくいかなかったら以前のバージョンも試してみてください。
まとめ
Font Awesomeが豆腐になるケースは多くの場合で人災です。
自戒を込めてそう言わせていただきます。
なお、
当サイトでは、SVG直埋めへ移行しています
本記事で書いたような読み込みトラブルを減らすためでもありますし。
読み込みそのものが重いので、サイトを軽量化するには向かないのもあります。
SVGにもHTMLの可読性が下がるなどのデメリットがありますので、手放しでは勧められません。
一方アイコンフォントを使う場所を絞った上で用いるなら。
表示面において、あるいはサイト速度面において、絶大な効果を得られるかもしれません。
よかったらSVGも試してみてください！
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。