CSS で Font Awesome アイコンのフォント ファミリを正しく設定するにはどうすればよいですか?

Font Awesome 擬似要素の正しいフォント ファミリーの決定

Font Awesome 5 は、無料、堅実、ブランド、そしてレギュラー。アイコンを正しく表示するには、各ファミリで CSS 擬似要素で特定のフォント ファミリを割り当てる必要があります。

ケース 1: ブランド アイコン

次のようなブランド アイコンを使用する場合Twitter アイコンは https://fontawesome.com/icons/twitter?style=brands で入手できます。正しいフォント ファミリーは「Font Awesome 5」です。ブランド。」これは、ブランド アイコンが明確な視覚スタイルを持ち、別のフォント ファミリに格納されているためです。

ケース 2: ソリッド アイコン

ソリッド アイコンを表示しようとすると、 https://fontawesome.com/icons/phone?style=solid で入手できる電話アイコンなど、正しいフォントファミリーが使用されていないことに注意することが重要です。 「Font Awesome 5 Solid」。実線のアイコンは、実際には通常のアイコンと同じフォント ファミリ、つまり「Font Awesome 5 Free」に属しています。

正しいアプローチ

特定のフォントを割り当てる代わりに、各アイコン スタイルのファミリを指定するには、必要なすべてのフォント ファミリをカンマで区切って 1 行に含めることをお勧めします。これにより、ブラウザーはアイコンのスタイルに基づいて適切なフォントを使用するようになります。

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
}

このアプローチでは、ブラウザーはブランド アイコンに遭遇した場合には Brand フォント ファミリを優先し、次にブランド アイコンに遭遇した場合には Free font-family を優先します。実線または通常のアイコン。

以上がCSS で Font Awesome アイコンのフォント ファミリを正しく設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。