Font Awesome 5 疑似要素の正しいフォント ファミリーを選択するにはどうすればよいですか?

Font Awesome 5 擬似要素の正しいフォントファミリーの選択

CSS で Font Awesome 5 アイコンを擬似要素として使用する場合、適切なフォントファミリーを指定することが重要です。使用可能なオプションは次のとおりです: Font Awesome 5 Free、Font Awesome 5 Solid、Font Awesome 5 Brands、および Font Awesome 5 Regular。

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

の場合使用しているアイコンがブランド スタイル (Twitter など) に属している場合は、「フォント」を使用してください。 Awesome 5 Brands" font-family.

h1:before {
  font-family: "Font Awesome 5 Brands";
}

ケース 2: 塗りつぶしアイコン (問題の解決)

塗りつぶしアイコンの場合は、しないでください 「Font Awesome 5 Solid」フォント ファミリを使用します。 Solid アイコンと Regular アイコンは同じフォント ファミリを共有するため、代わりに「Font Awesome 5 Free」を使用してください。

h1:before {
  font-family: "Font Awesome 5 Free";
}

一般ルール: 複数のフォント ファミリを使用する

互換性を確保するには、必要なフォント ファミリをすべて font-family プロパティに組み込みます。ブラウザは自動的に正しいアイコンを選択します。

h1:before {
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}

注:

• 塗りつぶしアイコンと標準アイコンは、フォントの太さのみが異なり、フォント ファミリーは異なりません。 .
• すべての標準アイコンが無料というわけではありません。一部は Pro パッケージでのみ利用可能です。
• アイコンが表示されない場合、必ずしもフォント ファミリの問題が原因であるとは限りません。
• アイコンのライト バージョンとデュオトーン バージョンはすべて Pro パッケージに含まれています.

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