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 a

Answer 1

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:

CSS:

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

OR make use of HTML entities:

HTML:

CSS:

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

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