---
title: "アイコンフォント（Font Awesome等）が四角や文字で表示されるときの対処"
description: "Font Awesomeなどのアイコンを設置したのに四角い記号や文字がそのまま出てしまうと困っている方向け。読み込み失敗やクラス指定ミスなど数パターンに絞った原因と対処法がわかります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/icon-font-shows-square"
markdown: "https://giga-site.com/articles/icon-font-shows-square/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# アイコンフォント（Font Awesome等）が四角や文字で表示されるときの対処

Font Awesomeなどのアイコンを置いたのに、四角い記号(いわゆる豆腐)やクラス名の文字がそのまま出てしまう。これはアイコンフォント本体の読み込みやクラス指定がうまくいっていないサインです。原因は数パターンに絞れます。

> Source HTML: https://giga-site.com/articles/icon-font-shows-square
> Article index: https://giga-site.com/articles/index.md

## 四角や文字になる仕組み

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

クラス名がそのまま文字で表示される場合は、擬似要素にアイコンを差し込む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が付くため、確認中のページが検索結果に出る心配もありません。

## よくある質問

### 四角(豆腐)が並ぶのとクラス名が出るのは何が違いますか

四角はCSSは当たっているがフォントファイル本体を読み込めていないサインです。クラス名がそのまま文字で出るのは、擬似要素にアイコンを差すCSS自体が当たっていないサインです。症状で原因を切り分けられます。

### CDNでは出るのにローカルやZIPでは出ません

相対パスのずれでフォントファイルを見失っている可能性が高いです。@font-faceのurlやCSSの参照パスを、配布するフォルダ構成に合わせて確認してください。フォントファイルの同梱漏れも疑いましょう。

### Font Awesomeのクラスを書いたのに何も出ません

バージョンによってクラスの書式が異なります。古い fa と新しい fa-solid / fa-regular などが混在していないか、利用中のバージョンの正しいクラス指定になっているかを確認してください。

### アイコンフォントとSVGはどちらが良いですか

少数ならインラインSVGが読み込み失敗に強く扱いやすいです。多数のアイコンをまとめて使うならアイコンフォントが便利です。規模と保守性で選び、フォントを使う場合は読み込み保証を徹底してください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [rem・emで指定した文字サイズが想定とずれるときの原因と対処](https://giga-site.com/articles/rem-em-font-size-wrong/index.md)
- [環境によってフォントが別物に置き換わり見た目が変わるときの対処](https://giga-site.com/articles/font-fallback-different-look/index.md)
- [WindowsとMacで文字の太さ・見え方が違うときの対処](https://giga-site.com/articles/windows-mac-font-rendering-diff/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "アイコンフォント（Font Awesome等）が四角や文字で表示されるときの対処",
  "description": "Font Awesomeなどのアイコンを設置したのに四角い記号や文字がそのまま出てしまうと困っている方向け。読み込み失敗やクラス指定ミスなど数パターンに絞った原因と対処法がわかります。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/icon-font-shows-square",
  "url": "https://giga-site.com/articles/icon-font-shows-square",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "四角(豆腐)が並ぶのとクラス名が出るのは何が違いますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "四角はCSSは当たっているがフォントファイル本体を読み込めていないサインです。クラス名がそのまま文字で出るのは、擬似要素にアイコンを差すCSS自体が当たっていないサインです。症状で原因を切り分けられます。"
      }
    },
    {
      "@type": "Question",
      "name": "CDNでは出るのにローカルやZIPでは出ません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "相対パスのずれでフォントファイルを見失っている可能性が高いです。@font-faceのurlやCSSの参照パスを、配布するフォルダ構成に合わせて確認してください。フォントファイルの同梱漏れも疑いましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "Font Awesomeのクラスを書いたのに何も出ません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "バージョンによってクラスの書式が異なります。古い fa と新しい fa-solid / fa-regular などが混在していないか、利用中のバージョンの正しいクラス指定になっているかを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "アイコンフォントとSVGはどちらが良いですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "少数ならインラインSVGが読み込み失敗に強く扱いやすいです。多数のアイコンをまとめて使うならアイコンフォントが便利です。規模と保守性で選び、フォントを使う場合は読み込み保証を徹底してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```