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

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

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

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

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;
}

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