Unicode para ícones Font Awesome 5 estrelas: usando as classes 'far' e 'fas'

Font Awesome 5 oferece ofertas regulares e sólidas ícones de estrela, representados pelos valores Unicode '\f005' para ambos. Para utilizar essas variações em seu sistema de classificação, você pode aproveitar o CSS para alternar entre as classes 'far' e 'fas'.

A classe 'fas' representa a estrela sólida, enquanto 'far' representa a estrela normal . A chave para alternar entre eles está em ajustar a espessura da fonte. Ao definir a espessura da fonte como 900 para a estrela marcada e 200 para a estrela desmarcada, você pode alternar facilmente entre as versões sólida e regular, respectivamente.

Aqui está um snippet de código atualizado que leva isso em consideração:

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 garante que o ícone de estrela seja regular quando desmarcado e sólido quando marcado, permitindo que você crie um sistema de classificação dinâmico e interativo com facilidade.