Unicode über CSS :vorher

Lesezeit: 4 Minuten

Benutzer-Avatar
Sven

ich benutze Schriftart genial auf meiner Webseite und ich möchte ein Symbol darin anzeigen :before Pseudo-Element.

Laut dem Dokumentation/Cheatsheetich muss tippen  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, wenn Sie HTML-Entitäten in anzeigen möchten :beforemüssen Sie die Escape-Hex-Referenz verwenden.
Also suchte ich nach der Hex-Referenz zu  aber ich fand nichts. 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?

  • Da der Link ein 404 ist, sprechen Sie vielleicht von Pseudo-Elementen? Hast du versucht hinzuzufügen content: ""; im CSS für Ihre :before Element?

    – tsujp

    12. Januar 2013 um 15:49 Uhr

  • ziemlich sicher ist es das: fortawesome.github.com/Font-Awesome

    – Stuart Burrows

    12. Januar 2013 um 15:50 Uhr

  • Ja, sorry Jungs! Link ist jetzt behoben! @tsujp Eigentlich sollte das Symbol innerhalb des Pseudo-Elements angezeigt werden.

    – Sven

    12. Januar 2013 um 15:50 Uhr


  • Genau genommen können Sie keine HTML-Entitäten in anzeigen :before. Sie können Unicode-Zeichen anzeigen, die durch Entity-Referenzen in HTML dargestellt werden, aber Sie tun dies nicht mit der HTML-Entity-Syntax.

    – BoltClock

    12. Januar 2013 um 15:54 Uhr


Benutzer-Avatar
Stefan

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

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

Update – Version 5 hat andere 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

Laut Kommentar (BuddyZ) hier einige weitere Informationen https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

  • Mir gefällt, wie Sie den Teil der Schriftfamilie hinzugefügt haben, denn das ist der Schlüssel, der meine zum Laufen gebracht hat

    – ajk4550

    6. Februar 2015 um 17:00 Uhr

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

    – Kildareflare

    11. Juli 2018 um 10:39 Uhr

  • einzige Schriftfamilie: FontAwesome hat bei mir funktioniert. nicht Schriftfamilie: “FontAwesome”

    – Sameera R.

    26. August 2018 um 5:42 Uhr

  • Überraschenderweise hat bei mir nichts funktioniert, außer was @Sameera gesagt hat. Kann bestätigen, dass am 23.10.19 nur die Schriftfamilie: FontAwesome auch für mich funktioniert hat. wollte ich nutzen Das Pfeilsymbol von FA. Das war mein Code: a:last-child:after { font-family: FontAwesome; content: '\f061'; }

    – Sansae

    24. Oktober 2019 um 1:27 Uhr

  • fontawesome.com/how-to-use/on-the-web/advanced/…

    – Nando

    9. Februar 2021 um 21:28 Uhr

Die maskierte Hex-Referenz von  ist \f066.

content: "\f066";

  • Bitte beachten Sie 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

    29. Oktober 2014 um 14:42 Uhr

  • Jeder, der in PHP geparstes CSS verwendet, muss die Hex-Referenz wie folgt doppelt maskieren: content: “\\f066”;

    – Ramijame

    3. Juli 2016 um 7:27 Uhr


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

    – Kildareflare

    11. Juli 2018 um 10:39 Uhr

Dateiformat.info ist eine ziemlich gute Referenz für dieses Zeug. In Ihrem Fall ist es bereits in Hex, also ist der Hex-Wert f066. Also würdest du Folgendes tun:

content: "\f066";

  • Danke für diese Antwort. Ich wusste nicht, dass die Symbole aus irgendeinem Grund in Hex waren. Also fügte ich immer wieder ‘#’ in die Zeichenfolge ein und es funktionierte nicht. Jetzt gehts.

    – Hülse

    19. Mai 2018 um 23:58 Uhr

Die Codepunkte, die in Icon-Font-Tricks verwendet werden, sind normalerweise Codepunkte für den privaten Gebrauch, was bedeutet, dass sie keine allgemein definierte Bedeutung haben und nicht im offenen Informationsaustausch verwendet werden sollten, sondern nur durch private Vereinbarung zwischen interessierten Parteien. Codepunkte für private Nutzung können jedoch als beliebige andere Unicode-Werte 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 man einen beliebigen Unicode-Wert anhand seiner Nummer in Ihrer Autorenumgebung eingibt (aber natürlich würde er normalerweise mit einem Symbol für einen unbekannten angezeigt Charakter).

Dies ist jedoch nicht die normale Art der Verwendung von Symbolschriften. Normalerweise verwenden Sie eine CSS-Datei, die mit der Schriftart bereitgestellt wird, und verwenden Konstrukte wie <span class="icon-resize-small">foo</span>. Der CSS-Code kümmert sich dann um das Einfügen des Symbols am Anfang des Elements, und Sie müssen die Nummer des Codepunkts nicht kennen.

Verknüpfen Sie zuerst die fontwaesome CSS-Datei in Ihrer HTML-Datei und erstellen Sie dann eine After- oder Before-Pseudoklasse wie “font-family: “FontAwesome”; content: “\f101″;” dann speichern. Ich hoffe, diese Arbeit gut.

Benutzer-Avatar
Tom

Wichtig – Sie müssen die Schriftstärke (Schriftstärke: 900) hinzufügen, damit es funktioniert.

1320170cookie-checkUnicode über CSS :vorher

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy