Unicode über CSS: vorher

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?

— 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

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

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

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

3

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.

— Jukka K. Korpela
quelle

1

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.

— Ashraful Alam
quelle