Font Awesome 5 の空の正方形の問題: JS SVG アイコンのレンダリングの問題を修正する方法は?

Font Awesome 5: JS SVG での空の四角形の問題のトラブルシューティング

Font Awesome 5 の JS SVG バージョンを使用して箇条書きをアイコンに置き換えようとすると、次のような問題が発生する可能性があります。空の正方形のレンダリングの問題。この記事では、原因を詳しく調べ、解決策を提供します。

原因を理解する

空の四角形の問題は、Font Awesome 5 の JS バージョンがデフォルトで疑似要素の使用を有効にしていないために発生します。 (:before と :after)。

ソリューションの実装

解決するにはこの問題では、data-search-pseudo-elements 属性を活用できます。

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

この属性は、Font Awesome に HTML 内の疑似要素を解析するように指示します。ただし、アイコンを正しく表示するには、次のように疑似要素を非表示にし、SVG 要素を直接スタイル設定する必要がある場合があります:

.testitems:before {
  display: none; /* Hide the pseudo element */
}

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

これらの変更を実装すると、Font Awesome 5 アイコンをレンダリングできるようになります。 JS SVG バージョンを正しく使用してください。

以上がFont Awesome 5 の空の正方形の問題: JS SVG アイコンのレンダリングの問題を修正する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。