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

Font Awesome 5 擬似要素の問題: 正方形とアイコン

CSS では、擬似要素を使用して Font Awesome 5 アイコンを表示すると、次のような問題が発生することがあります。この記事ではアイコンではなく予期しない四角形が表示されますこの問題の原因とその修正方法を検討します。

四角形の原因

結果として生じる四角形の問題は、適切な文字の重みが不足していることが原因で発生します。デフォルトでは、擬似要素のフォントの太さは「通常」ですが、適切に表示するために「太字」または「900」の太さを必要とする Font Awesome アイコンには適していません。

回避策

この問題を解決するには次のルールを CSS に追加します:

.myClass::after {
  font-weight: 900;
}

このルールは、擬似要素のフォントのウェイトを「900」に設定します。これにより、Font Awesome アイコンが正しく表示されます

例外

この修正は、他のアイコン セットのアイコンにのみ適用される場合があることに注意してください。

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