IcoMoon が表示されない:6 項目チェックリスト
症状は「何も出ない」「□(豆腐)が出る」「関係ない文字が出る」の 3 パターンですが、原因はほぼ 6 つに集約されます。上から順に確認すれば、たいてい 2 項目以内で特定できます。各項目に検証方法を付けているので、当てずっぽうは不要です。
1. フォントは本当に読み込まれている?
開発者ツール → Network → Font で絞り込んで再読み込み。404 ならパス問題(次項へ)。読み込み成功なのに表示されないなら疑似要素の書き方(4 項)へ。最初にここを見るのが最短ルートです。
2. url() の基準は CSS ファイル、ページではない
style.css 内の url("fonts/icomoon.woff2") は CSS ファイルの場所が基準です。CSS だけ移動して fonts/ を置き去りにすると 404 になります。書き出し zip のフォルダ構造を保つか、/fonts/… のようにルート絶対パスに書き換えてください。
3. サーバーの MIME タイプ
古いサーバー設定では .woff2 に誤った Content-Type が返ることがあります。Network でフォントのレスポンスヘッダを確認——woff2 は font/woff2 が正。自前の Nginx / IIS ならフォント拡張子のマッピングを追加します。
4. content には必ずエスケープしたコードを
手書き CSS の場合、.icon-home:before { content: "\e900"; } のようにバックスラッシュ+16 進コードで書きます。e900 や u+e900 と書くとその文字列がそのまま表示されるだけ。各アイコンの正確なコードはチートシートで確認できます。
5. 再書き出しでコードがずれた
selection.json を使わずゼロから選び直して書き出すと、同じ名前のアイコンでも別のコードポイントに割り当てられることがあります。古い CSS のまま新フォントを差し替えると別のグリフが出る——最新の style.css ごと差し替えるか、selection.json を再インポートして書き出し直すのが正解です。
6. 最後はキャッシュ
すべて正しいのに変わらない時はスーパーリロード(Ctrl+F5)、またはフォント URL に ?v=2 のようなクエリを付けて再取得させます。CDN を挟んでいる場合は CDN 側のキャッシュ削除も忘れずに。
それでも直らない時:最小構成に戻す
当サイトの配布 ZIP(491 アイコン+生成済み CSS)を空の HTML で動かして、まず「動く最小例」を作ってから自分のプロジェクトと差分を取る——複雑な環境で正面から追うより、こちらの方が確実に速いです。コードとクラス名の対照はチートシート、基本の流れは使い方ページへ。