Verwenden Sie FontAwesome Symbol in einem ::before pseudo-element mit attr()

Ich versuche, fügen Sie ein FontAwesome Symbol in einem ::before pseudo-element mit attr() . Der ursprüngliche code ist komplexer, aber dies wird Ihnen eine Idee geben, was ich will:

<div data-background-icon="\f086"></div>

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

https://jsfiddle.net/grutcop8/

Funktioniert es nicht, während der üblichen Weise einbetten funktioniert es:

div::before {
  content: "\f086";
  font-family: "FontAwesome";
}

Alles, was ich bin fehlt?

  • Ihre Referenz, um die Daten korrekt zu sein scheint: jsfiddle.net/76v9e2ur
  • Es ist, aber es nicht zeigen das Symbol.
  • Eine kompliziertere Möglichkeit wäre eine Klasse, die hat content:'\f086 " und fügen Sie die Klasse an einem element nur, wenn das element "Daten-..." == "\\f086". Wuff, besser nicht darüber nachdenken
InformationsquelleAutor sdvnksv | 2016-03-24
  1. 21

    Versuchen mit Unicode

    CSS-escape-Sequenzen funktionieren nur innerhalb von CSS-strings. Wenn Sie einen CSS-escape-Sequenz, die aus einem HTML-Attribut (d.h. außerhalb von CSS), es wird Sie buchstäblich gelesen werden, nicht so auszulegen, als Teil eines CSS-string.

    Wenn Sie möchten, codieren Sie die Zeichen in ein HTML-Attribut, die Sie benötigen
    codieren Sie es als HTML-Entität.

    sollten Sie "&#x" bevor Sie Ihre font-Awesome-icon-code. dh, wenn Sie verwenden möchten /f086, dann schreiben &#xf086 statt

    Holen Sie sich die unicode von hier aus - https://fortawesome.github.io/Font-Awesome/cheatsheet/

    UPDATE

    Wenn Sie mit fontAwesome 5 ändern font-family: "FontAwesome"; zu font-family: 'Font Awesome 5 Free';

    CSS:

    div:before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div data-background-icon='&#xf086;'></div>

    • Vielen Dank, es funktioniert! Jedoch, es ist nicht wirklich W3C valid, hab ich Recht?
    • yup. Wird es eine Warnung wie diese - " Dokument verwendet den Unicode Private Use Area(en), die nicht verwendet werden dürfen, die in öffentlich ausgetauschten Dokumente. (Charmod C073)"
    • &#xf086 dies ist keine Arbeit
    • Haben Sie vielleicht mit fontAwesome5. in diesem Fall beziehen sich diese - jsfiddle.net/Jinukurian7/nfgp8e0a/1
    InformationsquelleAutor Jinu Kurian
  2. 1

    CSS liest \f086 als string und nicht als escape-Sequenz. Das Update ist entweder nutzen Sie direkt im content-Attribut wie content: '\f086'; oder direkt kopieren und einfügen-icon im HTML-Attribut (stellen Sie sicher, dass Sie speichern Sie Ihre Datei als UTF-8)

    HTML:

    <div data-background-icon=""></div> <!-- this is the bluetooth icon copied from fontawesome -->

    CSS:

    div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

    ODER nutzen Sie HTML-entities:

    HTML:

    <div data-background-icon="&#xf086;"></div>

    CSS:

    div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

    Fiddle: https://jsfiddle.net/76v9e2ur/1/

    InformationsquelleAutor mehulmpt
Schreibe einen Kommentar