疑似要素にはどの Font Awesome 5 フォント ファミリーを使用する必要がありますか?

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

Font Awesome 5 には、Font Awesome 5 Free、Font Awesome 5 Solid の 4 つのフォントファミリー オプションがあります。 、Font Awesome 5 ブランド、および Font Awesome 5 Regular。 CSS 疑似要素でアイコンを使用する場合、適切に表示されるように正しいフォント ファミリを選択することが重要です。

フォント ファミリー タイプについて

• Font Awesome 5ブランド: ブランドとソーシャルメディアが含まれますアイコン。
• Font Awesome 5 Free: ほとんどの無料アイコンが含まれるデフォルトのフォント ファミリ。
• Font Awesome 5 Solid: A単色のアイコンが付いた Font Awesome 5 Free のサブセットstyle.
• Font Awesome 5 Regular: より軽い通常のスタイルのアイコンを備えた Font Awesome 5 Free のサブセット。

正しいフォント ファミリーの選択

使用する正しいフォントファミリーは、アイコンによって異なります。

• ブランド アイコンの場合は、Font Awesome 5 Brands を使用します。
• 特定のスタイルの一部ではない、または無料の他のすべてのアイコンについては、次を使用しますフォント素晴らしい 5無料.

Font Awesome 5 Solid と Font Awesome 5 Regular は別個のフォント ファミリではないことに注意してください。これらは、font-weight プロパティを使用して実現できるスタイルのバリエーションです。

CSS コード例

同じ宣言で複数の font-family オプションを使用するには、それらを優先順にリストするだけです。

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

これにより、ブラウザは、必要なアイコンを含む最初のフォント ファミリを使用するようになります。

トラブルシューティング

アイコンが正しく表示されない場合は、正しいフォント ファミリを選択していること、およびアイコンが Font Awesome 5 の無料版に含まれていることを再確認してください。一部のアイコン、特にライト スタイルとデュオトーン スタイルは、Pro バージョンでのみ使用できます。

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