Unicode para iconos de 5 estrellas de Font Awesome: uso de las clases 'far' y 'fas'

Font Awesome 5 ofrece regular y sólido iconos de estrella, representados por los valores Unicode '\f005' para ambos. Para utilizar estas variaciones en su sistema de calificación, puede aprovechar CSS para alternar entre las clases "lejos" y "fas".

La clase "fas" representa la estrella sólida, mientras que "lejos" representa la estrella normal. . La clave para cambiar entre ellos radica en ajustar el peso de la fuente. Al establecer el peso de la fuente en 900 para la estrella marcada y 200 para la estrella no marcada, puedes cambiar sin esfuerzo entre las versiones sólida y normal, respectivamente.

Aquí hay un fragmento de código actualizado que tiene esto en cuenta:

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

Este código garantiza que el ícono de estrella sea regular cuando no esté marcado y fijo cuando esté marcado, lo que le permitirá crear un sistema de calificación dinámico e interactivo con facilidad.