Font Awesome 5 でさまざまな Unicode の星アイコンを使用する方法は?

Font Awesome 5 Unicode スター評価システム: 通常 vs. ソリッド

Font Awesome 5 では、通常のスター アイコンとソリッド スター アイコンには異なる Unicode 値があります (

星のバージョンを切り替えるための CSS コード:

CSS を使用して通常の星バージョンと塗りつぶしの星バージョンを切り替えるには、次のようにします。フォントの太さを調整します:

<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; /* Solid star */
}

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

実装:

この星評価システムを使用するには:

1. フォントを含める素晴らしい CSS ファイル:

   <code class="html"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"></code>

2. スター クラスでチェックボックス入力を作成:

   <code class="html"><input type="checkbox" class="star"></code>

3. スター クラスでラベルを追加チェックボックスの次:

   <code class="html"><label class="star"></label></code>

上記の CSS コードを使用すると、チェックボックスをクリックすると、通常の星形 (フォントの太さ: 200) と星形が切り替わります。実線の星 (フォント ウェイト: 900)。

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