내 Font Awesome 5가지 아이콘이 빈 사각형으로 표시되는 이유는 무엇이며 어떻게 해결할 수 있나요?

Font Awesome 5 JS SVG 버전의 빈 사각형: 근본 원인 공개

JS SVG를 통해 Font Awesome 아이콘을 목록 항목에 통합하려는 시도 버전으로 인해 일부 사용자에게는 빈 사각형이 표시되었습니다. 이 문제는 라이브러리가 의사 요소에 의존하기 때문에 발생합니다.

의사 요소 문제 해결

Font Awesome 5의 최신 릴리스에서는 의사 요소를 활성화할 수 있습니다. - "data-search-pseudo-elements" 속성을 통합하여 요소 사용. 이는 라이브러리가 CSS에서 의사 요소를 검색하도록 지시합니다.

수정된 코드 조각

이 솔루션을 구현하려면 다음과 같이 코드를 수정하세요.

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none;
}

.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>

이 수정된 코드는 의사 요소를 숨기고 스타일 지정을 위해 SVG를 대상으로 하여 아이콘.

위 내용은 내 Font Awesome 5가지 아이콘이 빈 사각형으로 표시되는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!