Font Awesome 5 SVG リスト項目の箇条書きが空の四角形として表示されるのはなぜですか?

JS SVG バージョンを使用すると Font Awesome 5 に空の四角形が表示される

JS SVG バージョンで Font Awesome 5 を使用しようとすると、ユーザーリスト項目の箇条書きが空の四角形として表示される問題が発生する可能性があります。この問題は、Font Awesome 5 がデフォルトで疑似要素のサポートを無効にしていることが原因で発生します。

解決策

Font Awesome の JS バージョンで疑似要素のサポートを有効にするには5、スクリプトに data-search-pseudo-elements 属性を追加しますtag:

<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 中国語 Web サイトの他の関連記事を参照してください。