Wie verwende ich Font Awesome 5 Unicode für reguläre und feste Sterne?

Font Awesome 5 Unicode für reguläre und feste Sterne

Font Awesome 5 führt die Präfixe „far“ und „fas“ für reguläre und feste Sterne ein Symbole bzw. Obwohl beide Präfixe den gleichen Unicode („f005“) haben, stehen sie für unterschiedliche Schriftstärken. Das Verständnis dieser Unterscheidung ist von entscheidender Bedeutung, wenn Sie sie in CSS verwenden.

In Ihrem Codeausschnitt haben Sie erwähnt, dass Sie nur durchgezogene Sterne erhalten. Dies liegt daran, dass Sie die Schriftstärke sowohl für aktivierte als auch für nicht aktivierte Sternstatus auf 900 eingestellt haben. Um das gewünschte Verhalten zu erreichen, dass zunächst ein normaler Stern erscheint, der beim Klicken fest wird, müssen Sie die Schriftstärke entsprechend anpassen.

Das aktualisierte CSS unten kümmert sich darum:

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

In Im oben genannten Fall bleibt die Schriftstärke für den aktivierten Sternstatus bei 900, was zu einem durchgezogenen Stern führt. Im nicht markierten Zustand ist die Schriftstärke jedoch auf 200 eingestellt, was zu einem regulären Stern führt. Dieses Setup stellt sicher, dass der Stern beim Klicken zwischen normal und einfarbig wechselt.

Das obige ist der detaillierte Inhalt vonWie verwende ich Font Awesome 5 Unicode für reguläre und feste Sterne?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!