アイコンフォント（Font Awesome等）が四角や文字で表示されるときの対処

四角や文字になる仕組み

アイコンフォントは、特定のコードに対してアイコンの字形を割り当てた「フォント」です。ブラウザがそのフォントを読み込めていれば字形が表示され、読み込めていなければ既定フォントで描画されて、四角(対応字形が無い印)やコード相当の文字が出ます。

クラス名がそのまま文字で表示される場合は、擬似要素にアイコンを差し込むCSS自体が当たっていない可能性が高いです。一方、四角だけが並ぶ場合は、CSSは当たっているがフォントファイル本体が読み込めていない可能性が高いです。

この2つの症状を見分けると、原因の切り分けが一気に進みます。

原因を切り分ける手順

ネットワークと指定の両面から確認します。次の順でチェックしてください。

1. 開発者ツールのNetworkでCSSとフォントファイルが200で読めているか確認する
2. 404なら参照パス(href/url)が正しいか、ファイルが存在するか確認する
3. アイコン要素のクラス名がバージョンに合っているか確認する(fa/fas/fa-solid等)
4. Computedでアイコン要素の font-family が想定のフォント名になっているか確認する
5. ZIPで配布する場合はフォントファイルを同梱し、相対パスがずれていないか確認する

症状別チェック表

アイコンフォント（Font Awesome等）が四角や文字で表示されるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

よくある読み込み漏れ

最も多いのは、CSSは読めているのにフォントファイルが読めていないケースです。CSS内の @font-face が指すフォントのパスがずれていると、字形だけが出ずに四角になります。CDN利用時はURLのタイプミスもよくあります。

次に多いのがクラス名の不一致です。Font Awesomeはバージョンによってクラスの書き方が変わっており、古い fa の書式と新しい fa-solid の書式が混在していると表示されません。利用バージョンの正しい書式に揃えます。

また、ローカルやZIP配布で動かすと、開発時には絶対パスやCDNで動いていたものが、相対パスのずれでフォントを見失うことがあります。フォルダ構成とパスの整合を確認してください。

代替手段も検討する

アイコンフォントは手軽ですが、読み込み失敗時に豆腐が出る、色やサイズの扱いが文字寄りになるといった弱点があります。近年はSVGアイコンを直接埋め込む方法も広く使われています。

SVGはフォントの読み込みに依存せず、失敗しても文字化けのような状態になりにくいのが利点です。少数のアイコンならインラインSVG、多数なら必要なアイコンだけのアイコンフォントと、規模で選び分けます。

既存サイトでアイコンフォントを使い続けるなら、フォントの読み込み保証とフォールバック設計をしっかり行うことが大切です。

確認用URLで再現を検証する

アイコンの表示崩れは、キャッシュや環境差で「自分の画面では直ったように見える」ことがあります。確認用のページを実際に開いて、別環境でも字形が出るか検証するのが確実です。

ギガサイト便なら、フォントファイルを含むZIPをそのままドロップして共有URLを発行できます。CSS・JS・画像・フォントをまとめて配信できるので、相対パスを含めて本番に近い形で再現確認できます。

同じURLのまま差し替えられるので、パスやクラス名を修正しては再確認する作業がスムーズです。一時公開ページにはnoindexが付くため、確認中のページが検索結果に出る心配もありません。