Font Awesome 5 SVG 목록 항목 글머리 기호가 빈 사각형으로 표시되는 이유는 무엇입니까?

JS SVG 버전을 사용할 때 Font Awesome 5에 빈 사각형이 표시됨

JS SVG 버전에서 Font Awesome 5를 사용하려고 하면 사용자는 목록 항목 글머리 기호가 빈 사각형으로 렌더링되는 문제가 발생할 수 있습니다. 이 문제는 Font Awesome 5가 기본적으로 의사 요소 지원을 비활성화한다는 사실에서 발생합니다.

해결 방법

JS 버전의 Font Awesome에 대한 의사 요소 지원을 활성화하려면 5, 스크립트에 data-search-pseudo-elements 속성을 추가합니다. 태그:

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

또한 의사 요소 내에서 SVG 요소의 스타일을 지정하는 것이 중요합니다.

.testitems:before {
  content: "\f058";
  display: none;
}

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

이 단계를 따르면 사용자는 Font Awesome 5를 의사 요소와 원활하게 통합할 수 있습니다. JavaScript 애플리케이션의 요소입니다.

위 내용은 Font Awesome 5 SVG 목록 항목 글머리 기호가 빈 사각형으로 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!