Font Awesome 5에서 다양한 유니코드 별표 아이콘을 사용하는 방법은 무엇입니까?

Font Awesome 5 유니코드 별점 시스템: 일반 vs. 단색

Font Awesome 5에서 일반 별표 아이콘과 단색 별표 아이콘은 고유한 유니코드 값을 갖습니다( ) 그러나 글꼴 두께에 따라 모양이 다릅니다.

별 버전 교환을 위한 CSS 코드:

CSS를 사용하여 일반 별 버전과 단색 별 버전 간에 전환하려면 간단히 글꼴 두께 조정:

<code class="css">input.star:checked ~ label.star:before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* Solid star */
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200; /* Regular star */
}</code>

구현:

이 별점 시스템을 사용하려면:

1. 글꼴 포함 멋진 CSS 파일:

   <code class="html"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"></code>

2. 별형 클래스로 체크박스 입력 만들기:

   <code class="html"><input type="checkbox" class="star"></code>

3. 별형 클래스로 라벨 추가 다음 확인란 옆:

   <code class="html"><label class="star"></label></code>

위의 CSS 코드를 사용하여 확인란을 클릭하면 일반 별표(글꼴 두께: 200)와 별표 사이를 전환합니다. 단단한 별(글꼴 두께: 900).

위 내용은 Font Awesome 5에서 다양한 유니코드 별표 아이콘을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!