私の Font Awesome 5 アイコンが空の四角形として表示されるのはなぜですか?どうすれば修正できますか?

Font Awesome 5 JS SVG バージョンの空の四角形: 根本原因が明らかに

JS SVG を介して Font Awesome アイコンをリスト項目に組み込もうとしますバージョンによっては、一部のユーザーに空の四角形が表示される場合があります。この問題は、ライブラリが擬似要素に依存していることが原因で発生します。

擬似要素に関する問題の解決

Font Awesome 5 の最新リリースでは、擬似要素を有効にすることができます。 「data-search-pseudo-elements」属性を組み込むことによる -element の使用。これにより、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 中国語 Web サイトの他の関連記事を参照してください。