글머리 기호에 JS 및 SVG를 사용할 때 Font Awesome 5에서 빈 사각형이 표시되는 이유는 무엇입니까?

Font Awesome 5에서 JS SVG로 빈 사각형을 표시합니다.

Font Awesome 5를 사용하여 순서가 지정되지 않은 목록의 표준 글머리 기호를 바꾸려고 할 때, 원하는 아이콘 대신 빈 사각형이 나타날 수 있습니다. 이 문제는 JavaScript 및 SVG 버전의 라이브러리를 사용할 때 발생할 수 있습니다.

해결 방법

이 문제를 해결하려면 최신 버전의 Font Awesome 5를 사용하고 있는지 확인하세요. (v5.13.0 이상). 이번 릴리스에는 JS 버전에 의사 요소를 사용하는 기능이 도입되었습니다.

의사 요소 사용을 활성화하려면 JavaScript <script> 태그:</script>

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

수정된 CSS

Font Awesome 아이콘을 표시하려면 기본 의사 요소를 숨기고 스타일 지정을 위해 SVG 요소를 대상으로 지정해야 합니다.

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none; /* Hide the pseudo element */
}

/* Target the SVG for styling */
.testitems svg {
  color: #004d00;
  margin: 0 5px 0 -15px;
}

수정됨 HTML

수정된 CSS가 이제 SVG 요소를 올바르게 대상으로 지정하므로 HTML 코드는 동일하게 유지됩니다.

• List Item 1
• List Item 2
• List Item 3
• List Item 4
• List Item 5

사용 예

작동하는 솔루션을 시연하려면 를 다음으로 바꿀 수 있습니다. 코드:

List Item 1

첫 번째 목록 항목의 글머리 기호로 파란색 사용자 아이콘이 표시됩니다.

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