Unicode über CSS: vorher

Question 1

Ich verwende Font Awesome auf meiner Webseite und möchte ein Symbol im Pseudoelement anzeigen :before.

Laut Dokumentation / Cheatsheet muss ich eingeben , um diese Schriftart zu erhalten, aber es funktioniert nicht. Ich glaube, das ist normal, weil HTML-Entitäten in nicht unterstützt werden :before.
Also habe ich ein bisschen gegoogelt und herausgefunden, dass Sie die maskierte :beforeHex-Referenz verwenden müssen , wenn Sie HTML-Entitäten anzeigen möchten .
Also habe ich nach dem Hex-Verweis gesucht, aber nichts gefunden. Ich glaube, das liegt daran, dass dies Werte für den "privaten Gebrauch" sind, was auch immer das bedeutet.

Gibt es eine Möglichkeit, es zum Laufen zu bringen :before?

Question 2

Die maskierte Hex-Referenz von ist \f066.

content: "\f066";

Question 3

In CSS funktioniert FontAwesome-Unicode nur, wenn die richtige Schriftfamilie deklariert ist (Version 4 oder weniger):

font-family: "FontAwesome";
content: "\f066";

Update - Version 5 hat verschiedene Namen:

Frei

font-family: "Font Awesome 5 Free"

Profi

font-family: "Font Awesome 5 Pro"

Marken

font-family: "Font Awesome 5 Brands"

Siehe diese verwandte Antwort: https://stackoverflow.com/a/48004111/2575724

Question 4

Fileformat.info ist eine ziemlich gute Referenz für dieses Zeug. In Ihrem Fall ist es bereits hexadezimal, also ist der hexadezimale Wert f066. Also würden Sie tun:

content: "\f066";

Question 5

Die Codepunkte, die in Symbolschrifttricks verwendet werden, sind normalerweise Codepunkte für den privaten Gebrauch. Dies bedeutet, dass sie keine allgemein definierte Bedeutung haben und nicht im offenen Informationsaustausch verwendet werden sollten, sondern nur nach privater Vereinbarung zwischen interessierten Parteien. Codepunkte für den privaten Gebrauch können jedoch als jeder andere Unicode-Wert dargestellt werden, z. B. in CSS mit einer Notation wie \f066, wie andere geantwortet haben. Sie können den Codepunkt sogar als solchen eingeben, wenn Ihr Dokument UTF-8-codiert ist und Sie wissen, wie Sie einen beliebigen Unicode-Wert anhand seiner Nummer in Ihrer Authoring-Umgebung eingeben (aber natürlich wird er normalerweise mit einem Symbol für ein Unbekanntes angezeigt Charakter).

Dies ist jedoch nicht die normale Art, Symbolschriftarten zu verwenden. Normalerweise verwenden Sie eine CSS-Datei, die mit der Schriftart geliefert wird, und verwenden Konstrukte wie <span class="icon-resize-small">foo</span>. Der CSS-Code sorgt dann dafür, dass das Symbol am Anfang des Elements eingefügt wird, und Sie müssen die Codepunktnummer nicht kennen.

Question 6

Verknüpfen Sie zuerst eine fontwaesome CSS-Datei in Ihrer HTML-Datei und erstellen Sie dann eine Pseudoklasse nach oder vor wie "font-family:" FontAwesome "; content:" \ f101 ";" dann speichern. Ich hoffe das funktioniert gut.

Answer 1

81

Ich verwende Font Awesome auf meiner Webseite und möchte ein Symbol im Pseudoelement anzeigen :before.

Laut Dokumentation / Cheatsheet muss ich eingeben , um diese Schriftart zu erhalten, aber es funktioniert nicht. Ich glaube, das ist normal, weil HTML-Entitäten in nicht unterstützt werden :before.
Also habe ich ein bisschen gegoogelt und herausgefunden, dass Sie die maskierte :beforeHex-Referenz verwenden müssen , wenn Sie HTML-Entitäten anzeigen möchten .
Also habe ich nach dem Hex-Verweis gesucht, aber nichts gefunden. Ich glaube, das liegt daran, dass dies Werte für den "privaten Gebrauch" sind, was auch immer das bedeutet.

Gibt es eine Möglichkeit, es zum Laufen zu bringen :before?

html css unicode encoding icons Sven
quelle

Da der Link ein 404 ist, sprechen Sie möglicherweise über Pseduo-Elemente? Haben Sie versucht, content: "";das CSS für Ihr :beforeElement hinzuzufügen ?

Jordanien

Ich bin

Stuart Burrows

Ja, sorry Leute! Link ist jetzt behoben! @tsujp Eigentlich sollte das Symbol im Pseudoelement angezeigt werden.

Sven

Genau genommen können Sie keine HTML-Entitäten in anzeigen :before. Sie können Unicode-Zeichen anzeigen, die durch Entitätsreferenzen in HTML dargestellt werden, dies geschieht jedoch nicht mit der HTML-Entitätssyntax.

BoltClock

Answer 2

Da der Link ein 404 ist, sprechen Sie möglicherweise über Pseduo-Elemente? Haben Sie versucht, content: "";das CSS für Ihr :beforeElement hinzuzufügen ?

Jordanien

Answer 3

Ich bin

Stuart Burrows

Answer 4

Ja, sorry Leute! Link ist jetzt behoben! @tsujp Eigentlich sollte das Symbol im Pseudoelement angezeigt werden.

Sven

Answer 5

Genau genommen können Sie keine HTML-Entitäten in anzeigen :before. Sie können Unicode-Zeichen anzeigen, die durch Entitätsreferenzen in HTML dargestellt werden, dies geschieht jedoch nicht mit der HTML-Entitätssyntax.

BoltClock

Answer 6

118

Die maskierte Hex-Referenz von ist \f066.

content: "\f066";

JJJ
quelle

24

Alle sehen bitte die Antwort von super_ton, dass Sie die Schriftfamilie mit FontAwesome deklarieren müssen. Andernfalls erhalten Sie nur ein spezielles Symbol und nicht das richtige Symbol!

Lorem Affe

2

Für alle, die in PHP analysiertes CSS verwenden, müssen Sie die Hex-Referenz wie folgt doppelt maskieren: content: "\\ f066";

Ramijames

1

Beachten Sie, dass sich bei Verwendung von Font Awesome 5 die Schriftfamilie geändert hat. Siehe hier: stackoverflow.com/a/48004111/83542

Kildareflare

Answer 7

24

Alle sehen bitte die Antwort von super_ton, dass Sie die Schriftfamilie mit FontAwesome deklarieren müssen. Andernfalls erhalten Sie nur ein spezielles Symbol und nicht das richtige Symbol!

Lorem Affe

Answer 8

2

Für alle, die in PHP analysiertes CSS verwenden, müssen Sie die Hex-Referenz wie folgt doppelt maskieren: content: "\\ f066";

Ramijames

Answer 9

1

Beachten Sie, dass sich bei Verwendung von Font Awesome 5 die Schriftfamilie geändert hat. Siehe hier: stackoverflow.com/a/48004111/83542

Kildareflare

Answer 10

140

In CSS funktioniert FontAwesome-Unicode nur, wenn die richtige Schriftfamilie deklariert ist (Version 4 oder weniger):

font-family: "FontAwesome";
content: "\f066";

Update - Version 5 hat verschiedene Namen:

Frei

font-family: "Font Awesome 5 Free"

Profi

font-family: "Font Awesome 5 Pro"

Marken

font-family: "Font Awesome 5 Brands"

Siehe diese verwandte Antwort: https://stackoverflow.com/a/48004111/2575724

stefan
quelle

8

Mir gefällt, wie Sie den Teil der Schriftfamilie hinzugefügt haben, weil dies der Schlüssel ist, der meine Arbeit ermöglicht hat

ajk4550

1

Beachten Sie, dass sich bei Verwendung von Font Awesome 5 die Schriftfamilie geändert hat. Siehe hier: stackoverflow.com/a/48004111/83542

Kildareflare

1

einzige Schriftfamilie: FontAwesome hat bei mir funktioniert. nicht Schriftfamilie: "FontAwesome"

Sameera R.

Überraschenderweise funktionierte nichts für mich außer dem, was @Sameera sagte. Kann bestätigen, dass ab dem 23.10.19 nur die Schriftfamilie: FontAwesome auch für mich funktioniert hat. Ich wollte das Pfeilsymbol von FA verwenden . Dies war mein Code:a:last-child:after { font-family: FontAwesome; content: '\f061'; }

Sansae

Answer 11

8

Mir gefällt, wie Sie den Teil der Schriftfamilie hinzugefügt haben, weil dies der Schlüssel ist, der meine Arbeit ermöglicht hat

ajk4550

Answer 12

1

Beachten Sie, dass sich bei Verwendung von Font Awesome 5 die Schriftfamilie geändert hat. Siehe hier: stackoverflow.com/a/48004111/83542

Kildareflare

Answer 13

1

einzige Schriftfamilie: FontAwesome hat bei mir funktioniert. nicht Schriftfamilie: "FontAwesome"

Sameera R.

Answer 14

Überraschenderweise funktionierte nichts für mich außer dem, was @Sameera sagte. Kann bestätigen, dass ab dem 23.10.19 nur die Schriftfamilie: FontAwesome auch für mich funktioniert hat. Ich wollte das Pfeilsymbol von FA verwenden . Dies war mein Code:a:last-child:after { font-family: FontAwesome; content: '\f061'; }

Sansae

Answer 15

11

Fileformat.info ist eine ziemlich gute Referenz für dieses Zeug. In Ihrem Fall ist es bereits hexadezimal, also ist der hexadezimale Wert f066. Also würden Sie tun:

content: "\f066";

Newtron
quelle

Danke für diese Antwort. Ich wusste nicht, dass die Symbole aus irgendeinem Grund hexadezimal waren. Also habe ich immer wieder '#' in den String eingefügt und es würde nicht funktionieren. Jetzt funktioniert es.

Shell

Answer 16

Danke für diese Antwort. Ich wusste nicht, dass die Symbole aus irgendeinem Grund hexadezimal waren. Also habe ich immer wieder '#' in den String eingefügt und es würde nicht funktionieren. Jetzt funktioniert es.

Shell

Answer 17

Die Codepunkte, die in Symbolschrifttricks verwendet werden, sind normalerweise Codepunkte für den privaten Gebrauch. Dies bedeutet, dass sie keine allgemein definierte Bedeutung haben und nicht im offenen Informationsaustausch verwendet werden sollten, sondern nur nach privater Vereinbarung zwischen interessierten Parteien. Codepunkte für den privaten Gebrauch können jedoch als jeder andere Unicode-Wert dargestellt werden, z. B. in CSS mit einer Notation wie \f066, wie andere geantwortet haben. Sie können den Codepunkt sogar als solchen eingeben, wenn Ihr Dokument UTF-8-codiert ist und Sie wissen, wie Sie einen beliebigen Unicode-Wert anhand seiner Nummer in Ihrer Authoring-Umgebung eingeben (aber natürlich wird er normalerweise mit einem Symbol für ein Unbekanntes angezeigt Charakter).

Dies ist jedoch nicht die normale Art, Symbolschriftarten zu verwenden. Normalerweise verwenden Sie eine CSS-Datei, die mit der Schriftart geliefert wird, und verwenden Konstrukte wie <span class="icon-resize-small">foo</span>. Der CSS-Code sorgt dann dafür, dass das Symbol am Anfang des Elements eingefügt wird, und Sie müssen die Codepunktnummer nicht kennen.

Answer 18

Verknüpfen Sie zuerst eine fontwaesome CSS-Datei in Ihrer HTML-Datei und erstellen Sie dann eine Pseudoklasse nach oder vor wie "font-family:" FontAwesome "; content:" \ f101 ";" dann speichern. Ich hoffe das funktioniert gut.

Unicode über CSS: vorher

Antworten: