Font Awesome 5 별 아이콘용 유니코드: '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;
}

이 코드는 선택 취소 시 별표 아이콘이 일반 모양으로 표시되고 선택 시 단색으로 표시되므로 동적이고 대화형 평가 시스템을 쉽게 만들 수 있습니다.