Font Awesome 5 で箇条書きに JS と SVG を使用すると空の四角形が表示されるのはなぜですか?

Font Awesome 5 が JS SVG で空の四角形を表示する

Font Awesome 5 を使用して順序なしリスト内の標準の箇条書きを置き換えようとすると、目的のアイコンの代わりに空の四角形が表示される場合があります。この問題は、ライブラリの JavaScript および SVG バージョンを使用しているときに発生する可能性があります。

解決策

この問題を解決するには、最新バージョンの Font Awesome 5 を使用していることを確認してください。 (v5.13.0以降)。このリリースでは、JS バージョンで擬似要素を使用できる機能が導入されました。

擬似要素の使用を有効にするには、JavaScript <script> に data-search-pseudo-elements 属性を追加します。タグ:</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

これにより、最初のリスト項目の箇条書きとして青いユーザー アイコンが表示されます。

以上がFont Awesome 5 で箇条書きに JS と SVG を使用すると空の四角形が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。