Use FontAwesome icon inside a ::before pseudo element with attr()

Question

I am trying to insert a FontAwesome icon inside a ::before pseudo element with attr() . The original code is more complex, however this will give you an idea of what I want:

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

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

https://jsfiddle.net/grutcop8/

It doesn't work, while the usual way to embed it works OK:

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

Anything I am missing?

Your reference to the data seems to be correct: https://jsfiddle.net/76v9e2ur/ — timo, Mar 24 '16 at 10:15
A more complicated way would be to have a class which has content:'\f086' and add that class to an element, only if that element has "data-..." == "\\f086". Woof, better not think about it — Tommy, Mar 24 '16 at 10:39

Jinu Kurian · Accepted Answer · 2019-02-04T08:34:21.140

27

Try with Unicode

CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string.

If you want to encode the character within an HTML attribute, you need to encode it as an HTML entity.

you should add "&#x" before your font-Awesome icon code. ie, if you want to use /f086, then write &#xf086 instead

get the unicode from here - https://fortawesome.github.io/Font-Awesome/cheatsheet/

UPDATE

If you are using fontAwesome 5, change font-family: "FontAwesome"; to font-family: 'Font Awesome 5 Free';

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

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

edited Feb 04 '19 at 08:34

answered Mar 24 '16 at 10:23

Jinu Kurian

9,128
3
27
35

1

Thanks, it works! However, it's not really W3C valid, am I right? – sdvnksv Mar 24 '16 at 10:48
yup. It will give a warning like this - " Document uses the Unicode Private Use Area(s), which should not be used in publicly exchanged documents. (Charmod C073)" – Jinu Kurian Mar 24 '16 at 11:01
@DaVoDHoseiny You might have using fontAwesome5. in that case, refer this - https://jsfiddle.net/Jinukurian7/nfgp8e0a/1/ – Jinu Kurian Feb 04 '19 at 08:31

score 2 · Answer 2 · answered Mar 24 '16 at 10:23

CSS reads \f086 as a string and not as an escape sequence. The fix is either to use it directly inside content attribute like content: '\f086'; or directly copying and pasting icon in HTML attribute (make sure you save your file as 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";
}

OR make use of 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/

Note that if using Font Awesome 5, the font family has changed. See here: https://stackoverflow.com/a/48004111/83542 — Kildareflare, Jul 11 '18 at 10:39

Use FontAwesome icon inside a ::before pseudo element with attr()

2 Answers2

Linked