Wie bette ich Font Awesome-Symbole in SVG-Bilder ein?

So integrieren Sie Font Awesome-Symbole in SVG-Bilder

Beim Versuch, Bildverweise durch Font Awesome-Symbole in SVG-Dateien zu ersetzen, können Schwierigkeiten auftreten unter Verwendung der folgenden Syntax:

<g><i></i></g>

Der Basiswert Ursache

Das Tag wird nicht als gültiges SVG-Element erkannt. Stattdessen müssen Sie das tatsächliche Unicode-Zeichen einschließen, das das gewünschte Symbol darstellt.

Beziehen des Unicode-Zeichens

Informationen zum Beziehen des Unicode-Zeichens finden Sie im Stylesheet von Font Awesome. Dabei wird jedes Symbol durch einen Hexadezimalwert dargestellt, der in f Zeichen eingeschlossen ist, z. B. f0c0 für das Wolkensymbol. Aber in SVG muss die Syntax angepasst werden: f0c0 in  ändern.

Beispielsyntax

Die angepasste Syntax für die Einbindung eines Wolkensymbols in SVG wäre:

<g><text x="12" y="15"></text></g>

Styling Überlegungen

Um sicherzustellen, dass das Symbol sichtbar ist, fügen Sie die folgende CSS-Regel zu Ihrem Stylesheet hinzu:

svg text {
   font-family: FontAwesome;
}

Hinweis für Font Awesome 5 Free

Wenn Sie die kostenlose Version von Font Awesome 5 oder höher verwenden, sollte die Deklaration der Schriftfamilie auf Folgendes aktualisiert werden:

svg text {
   font-family: 'Font Awesome 5 Free';
}

Das obige ist der detaillierte Inhalt vonWie bette ich Font Awesome-Symbole in SVG-Bilder ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!