Юникод для значков Font Awesome 5 Star: использование классов «far» и «fas»

Font Awesome 5 предлагает как обычные, так и надежные значки звездочек, представленные значениями Юникода «\f005» для обоих. Чтобы использовать эти варианты в своей рейтинговой системе, вы можете использовать CSS для переключения между классами «far» и «fas».

Класс «fas» представляет собой сплошную звезду, а «far» — обычную звезду. . Ключом к переключению между ними является регулировка толщины шрифта. Установив толщину шрифта 900 для отмеченной звезды и 200 для неотмеченной звезды, вы можете легко переключаться между сплошной и обычной версией соответственно.

Вот обновленный фрагмент кода, который учитывает это:

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

Этот код гарантирует, что значок звездочки будет ровным, если флажок не установлен, и сплошным, если флажок установлен, что позволяет легко создать динамическую и интерактивную систему рейтингов.