Warum werden meine Font Awesome 5-Symbole als leere Quadrate angezeigt und wie kann ich das beheben?

Leere Quadrate in Font Awesome 5 JS SVG-Version: Grundursache aufgedeckt

Versuche, Font Awesome-Symbole über das JS SVG in Listenelemente zu integrieren Version führte bei einigen Benutzern zu leeren Feldern. Dieses Problem ergibt sich aus der Abhängigkeit der Bibliothek von Pseudoelementen.

Behebung des Problems mit Pseudoelementen

Mit der neuesten Version von Font Awesome 5 können Sie Pseudoelemente aktivieren -Element-Nutzung durch Einbindung des Attributs „data-search-pseudo-elements“. Dadurch wird die Bibliothek angewiesen, im CSS nach Pseudoelementen zu suchen.

Überarbeitetes Code-Snippet

Um diese Lösung zu implementieren, ändern Sie Ihren Code wie folgt:

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>

Dieser überarbeitete Code verbirgt das Pseudoelement und zielt für die Gestaltung auf die SVG-Datei ab, um die ordnungsgemäße Anzeige zu ermöglichen Symbole.

Das obige ist der detaillierte Inhalt vonWarum werden meine Font Awesome 5-Symbole als leere Quadrate angezeigt und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!