Unicode を使用した通常のフォントとソリッド フォントの Awesome 5 アイコンを区別する方法

Font Awesome 5 Unicode: fas と far の違いを理解する

Font Awesome 5 では、「fa-star」アイコンと「far fa-star」アイコンで異なるフォントの太さを使用して、実線のアイコンと通常の星のアイコンをそれぞれ作成します。どちらのアイコンも、Unicode コード ポイント「f005」を共有しています。

提供された CSS コードでは、通常の星と塗りつぶしの星の間の不一致は、一貫性のないフォントのウェイトに起因しています。通常バージョンとソリッド バージョンを切り替えるには、スタイルシートの font-weight プロパティを調整します。

<code class="css">input.star:checked ~ label.star:before {
  /* Solid star */
  font-weight: 900;
}

label.star:before {
  /* Regular star */
  font-weight: 200;
}</code>

通常バージョンのフォント ウェイトを 200、ソリッド バージョンのフォント ウェイトを 900 にすると、動的に切り替えることができます。ユーザー入力に基づいて 2 つの星の表現を切り替えます。

以上がUnicode を使用した通常のフォントとソリッド フォントの Awesome 5 アイコンを区別する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。