Unicode für Font Awesome 5-Sterne-Symbole: Verwendung der Klassen „far“ und „fas“

Font Awesome 5 bietet sowohl reguläre als auch solide Sternsymbole, dargestellt durch die Unicode-Werte „\f005“ für beide. Um diese Variationen in Ihrem Bewertungssystem zu nutzen, können Sie CSS nutzen, um zwischen den Klassen „far“ und „fas“ umzuschalten.

Die Klasse „fas“ stellt den durchgezogenen Stern dar, während „far“ den regulären Stern darstellt . Der Schlüssel zum Wechsel zwischen ihnen liegt in der Anpassung der Schriftstärke. Indem Sie die Schriftstärke auf 900 für den markierten Stern und 200 für den nicht markierten Stern festlegen, können Sie mühelos zwischen der einfarbigen und der regulären Version wechseln.

Hier ist ein aktualisierter Codeausschnitt, der dies berücksichtigt:

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

Dieser Code stellt sicher, dass das Sternsymbol regelmäßig ist, wenn es nicht aktiviert ist, und durchgehend, wenn es aktiviert ist, sodass Sie ganz einfach ein dynamisches und interaktives Bewertungssystem erstellen können.