CSS 의사 요소에서 Font Awesome 5 아이콘의 글꼴 계열을 올바르게 설정하는 방법은 무엇입니까?

Font Awesome 5 의사 요소에 대한 올바른 글꼴 계열 선택

CSS 의사 요소 내에서 Font Awesome 아이콘을 사용할 때 다음과 같습니다. 아이콘이 제대로 표시되도록 하려면 올바른 글꼴 모음을 선택하는 것이 중요합니다. 발생한 것처럼 잘못된 글꼴 계열을 사용하면 아이콘이 표시되지 않을 수 있습니다.

글꼴 계열 속성의 여러 글꼴

해결책은 다음을 활용하는 데 있습니다. 글꼴 모음 속성에 여러 글꼴이 있습니다. 이렇게 하면 브라우저는 일치하는 항목을 찾을 때까지 지정된 각 글꼴 모음에서 아이콘을 검색합니다. 이 경우 다음을 사용할 수 있습니다.

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";

단색 및 일반 아이콘용 글꼴 계열

가정한 것과는 반대로 두 가지 모두에 대한 글꼴 계열 단색 및 일반 아이콘은 "Font Awesome 5 Solid"가 아니라 "Font Awesome 5 Free"입니다. 단색 아이콘과 일반 아이콘의 차이점은 글꼴 계열이 아니라 글꼴 두께에 있습니다.

무료 아이콘과 PRO 아이콘

또한 모든 아이콘이 일반 아이콘이 아니라는 점에 주목하셨습니다. 아이콘은 무료입니다. 일부는 Font Awesome의 PRO 패키지에 포함되어 있습니다. 따라서 아이콘이 표시되지 않으면 무료 요금제에서 사용 가능 여부를 다시 확인하세요.

예제 코드

올바른 사용법을 설명하려면 다음 예를 고려하세요.

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon1:before {
  content: "\f099"; /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

위 내용은 CSS 의사 요소에서 Font Awesome 5 아이콘의 글꼴 계열을 올바르게 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!