Font Awesome 5 Unicode を通常のスターとソリッド スターに使用する方法は?

レギュラースターとソリッドスターの Font Awesome 5 Unicode

Font Awesome 5 では、レギュラースターとソリッドスターの「far」および「fas」接頭辞が導入されましたそれぞれのアイコン。どちらの接頭辞も同じ Unicode (「f005」) を持ちますが、異なるフォントの太さを表します。 CSS でこれらを使用する場合、この区別を理解することが重要です。

コード スニペットでは、実線の星のみが得られると述べました。これは、チェックされたスター状態とチェックされていないスター状態の両方で font-weight を 900 に設定しているためです。最初は通常の星が表示され、クリックすると実線になるという望ましい動作を実現するには、それに応じてフォントの太さを調整する必要があります。

以下の更新された 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;
}

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

上記では、チェックされた星の状態のフォント ウェイトは 900 のままで、実線の星になります。ただし、チェックされていない状態では、font-weight は 200 に設定され、通常の星印になります。この設定により、クリックすると星が通常と実線の間で切り替わります。

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