Font Awesome 5-Problem mit leeren Quadraten: Wie behebt man Probleme beim Rendern von JS-SVG-Symbolen?

Font Awesome 5: Fehlerbehebung beim Problem mit leeren Quadraten mit JS SVG

Beim Versuch, die JS SVG-Version von Font Awesome 5 zu verwenden, um Aufzählungspunkte durch Symbole zu ersetzen, kann es zu Problemen kommen ein Problem mit der Darstellung leerer Quadrate. Dieser Artikel befasst sich eingehend mit der Ursache und bietet eine Lösung.

Die Ursache verstehen

Das Problem mit leeren Quadraten tritt auf, weil die JS-Version von Font Awesome 5 standardmäßig die Verwendung von Pseudoelementen nicht ermöglicht (:vorher und:nachher).

Implementieren der Lösung

Um dieses Problem zu beheben, können Sie die nutzen data-search-pseudo-elements-Attribut:

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

Dieses Attribut weist Font Awesome an, Pseudoelemente in HTML zu analysieren. Um die Symbole jedoch korrekt anzuzeigen, müssen Sie möglicherweise das Pseudoelement ausblenden und das SVG-Element wie folgt direkt formatieren:

.testitems:before {
  display: none; /* Hide the pseudo element */
}

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

Durch die Implementierung dieser Änderungen sollten Sie in der Lage sein, Font Awesome 5-Symbole darzustellen korrekte Verwendung der JS SVG-Version.

Das obige ist der detaillierte Inhalt vonFont Awesome 5-Problem mit leeren Quadraten: Wie behebt man Probleme beim Rendern von JS-SVG-Symbolen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!