私の Font Awesome アイコンが空の四角形として表示されるのはなぜですか?

Font Awesome アイコンの表示問題のトラブルシューティング

目的の Font Awesome アイコンではなく空の四角形が表示されるとイライラすることがあります。一般的な問題とその解決策を見てみましょう。

Web ページに Font Awesome アイコンを含めようとすると、この問題がよく発生します。提供されたコードには、Internet Explorer 7 のバージョン固有のファイルなど、必要なスタイル シートが正しく含まれています。ただし、実際のアイコン宣言には重要な要素が欠落しています。

Font Awesome アイコンを正しく表示するには、2 つのクラス名が必要です。使用できるのは、fa クラスと、目的のアイコンを指定するクラスです。たとえば、Twitter アイコンを表示するには、コードは次のようになります。

<i class="fa fa-twitter"></i>

この例では、fa クラスが欠落しているため、正方形のプレースホルダーが表示されます。

Bootstrap 5 更新

Bootstrap 5 のリリースに伴い、fa プレフィックスは非推奨になりました。デフォルトのアイコン スタイルは、ソリッド アイコンの場合は「fas」、ブランド アイコンの場合は「fab」になりました。したがって、コードを次のように更新する必要があります:

<i class="fas fa-twitter"></i>

Font Awesome アイコンを正しく表示するには、fa クラスとアイコン固有のクラスの両方が含まれていることを確認します。

以上が私の Font Awesome アイコンが空の四角形として表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。