일반 별과 단색 별에 Font Awesome 5 유니코드를 사용하는 방법은 무엇입니까?

일반 별과 단색 별을 위한 Font Awesome 5 유니코드

Font Awesome 5는 일반 별과 단색 별에 'far' 및 'fas' 접두사를 도입합니다. 아이콘이 각각 표시됩니다. 두 접두사는 동일한 유니코드('f005')를 갖지만 서로 다른 글꼴 두께를 나타냅니다. CSS에서 이를 사용할 때 이러한 차이점을 이해하는 것이 중요합니다.

코드 조각에서 단단한 별표만 얻을 수 있다고 언급하셨습니다. 이는 선택된 별표 상태와 선택되지 않은 별표 상태 모두에 대해 글꼴 가중치를 900으로 설정했기 때문입니다. 클릭 시 처음에 단색으로 변하는 일반 별표를 갖는 원하는 동작을 달성하려면 이에 따라 글꼴 두께를 조정해야 합니다.

아래 업데이트된 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;
}

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

In 위에서 선택한 별표 상태의 글꼴 가중치는 900으로 유지되어 단색 별표가 됩니다. 그러나 선택되지 않은 상태의 경우 글꼴 가중치가 200으로 설정되어 일반 별표가 표시됩니다. 이 설정을 사용하면 클릭할 때 별이 보통과 단색 사이에서 변경됩니다.

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