Warum zeigt Font Awesome 5 leere Quadrate an, wenn JS und SVG für Aufzählungspunkte verwendet werden?

Font Awesome 5 zeigt leeres Quadrat mit JS SVG

Wenn Sie versuchen, Font Awesome 5 zu verwenden, um Standardaufzählungspunkte in einer ungeordneten Liste zu ersetzen, Möglicherweise wird anstelle des gewünschten Symbols ein leeres Quadrat angezeigt. Dieses Problem kann auftreten, wenn Sie die JavaScript- und SVG-Version der Bibliothek verwenden.

Lösung

Um dieses Problem zu beheben, stellen Sie sicher, dass Sie die neueste Version von Font Awesome 5 verwenden (v5.13.0 oder höher). Mit dieser Version wird die Möglichkeit eingeführt, Pseudoelemente mit der JS-Version zu verwenden.

Um die Verwendung von Pseudoelementen zu ermöglichen, fügen Sie das Attribut data-search-pseudo-elements zu Ihrem JavaScript <script> hinzu. tag:</script>

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

Geändertes CSS

Um das Font Awesome-Symbol anzuzeigen, müssen Sie das Standard-Pseudoelement ausblenden und das SVG-Element für die Gestaltung auswählen:

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;
}

Geändertes HTML

Ihr HTML-Code bleibt derselbe Das geänderte CSS zielt nun korrekt auf das SVG-Element ab:

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

Beispielverwendung

Um die funktionierende Lösung zu demonstrieren, können Sie durch Folgendes ersetzen Code:

List Item 1

Dadurch wird ein blaues Benutzersymbol als Aufzählungspunkt für das erste Listenelement angezeigt.

Das obige ist der detaillierte Inhalt vonWarum zeigt Font Awesome 5 leere Quadrate an, wenn JS und SVG für Aufzählungspunkte verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!