Warum werden Aufzählungszeichen für Font Awesome 5 SVG-Listenelemente als leere Quadrate angezeigt?

Font Awesome 5 zeigt bei Verwendung der JS SVG-Version ein leeres Quadrat an

Beim Versuch, Font Awesome 5 mit der JS SVG-Version zu verwenden, Benutzer Möglicherweise tritt ein Problem auf, bei dem Aufzählungszeichen von Listenelementen als leere Quadrate dargestellt werden. Dieses Problem ergibt sich aus der Tatsache, dass Font Awesome 5 die Unterstützung von Pseudoelementen standardmäßig deaktiviert.

Lösung

So aktivieren Sie die Unterstützung von Pseudoelementen für die JS-Version von Font Awesome 5. Fügen Sie dem Skript-Tag das Attribut data-search-pseudo-elements hinzu:

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

Außerdem ist es wichtig, das zu formatieren SVG-Elemente innerhalb der Pseudoelemente:

.testitems:before {
  content: "\f058";
  display: none;
}

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

Durch Befolgen dieser Schritte können Benutzer Font Awesome 5 nahtlos mit Pseudoelementen in ihre JavaScript-Anwendungen integrieren.

Das obige ist der detaillierte Inhalt vonWarum werden Aufzählungszeichen für Font Awesome 5 SVG-Listenelemente als leere Quadrate angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!