CSSを使用してFont Awesome 5 Starアイコンをカスタマイズする方法?

CSS を使用した Font Awesome 5 の星アイコンのカスタマイズ

Font Awesome 5 では、星アイコンには fas (実線) と 2 つのバリエーションがあります。遠い（普通）。これらのバリエーションは Unicode 値 (f005) によって区別でき、星が最初はアウトラインとして表示され、クリックすると塗りつぶされるという評価システムの作成に使用できます。

ソリッド スタイルと通常のスタイルを定義するにはCSS では、font-weight プロパティを使用できます。 900 に設定すると星を実線にすることができ、それより低い値 (200 など) に設定すると星を通常のアウトラインにすることができます。

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

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

このコードはフォントの太さをベースに調整します。星のチェックボックスがチェックされているかどうか。チェックボックスがチェックされている場合、星は実線になり、チェックされていない場合、星はアウトラインのままになります。

正しく設定するには、font-family プロパティを「Font Awesome 5 Free」に設定する必要があることに注意してください。アイコンが表示されます。

以上がCSSを使用してFont Awesome 5 Starアイコンをカスタマイズする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。