「far」クラスと「fas」クラスの Font Awesome 5 つ星アイコンに Unicode を使用する方法

Font Awesome 5 Star アイコンの Unicode: 'far' クラスと 'fas' クラスの使用

Font Awesome 5 はレギュラーとソリッドの両方を提供します星のアイコン。どちらも Unicode 値「f005」で表されます。評価システムでこれらのバリエーションを利用するには、CSS を利用して「far」クラスと「fas」クラスを切り替えることができます。

「fas」クラスは固体スターを表し、「far」クラスは通常のスターを表します。 。それらを切り替える鍵は、フォントの太さを調整することにあります。フォントのウェイトをチェック付きのスターの場合は 900、チェックされていないスターの場合は 200 に設定すると、それぞれソリッド バージョンと通常のバージョンを簡単に切り替えることができます。

これを考慮した更新されたコード スニペットは次のとおりです。

<code class="css">input.star:checked ~ label.star:before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200;
}</code>

このコードにより、星のアイコンがチェックされていない場合は通常、チェックされている場合は実線になるため、動的でインタラクティブな評価システムを簡単に作成できます。

以上が「far」クラスと「fas」クラスの Font Awesome 5 つ星アイコンに Unicode を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。