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

Viewed 24776

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?

2 Answers
Related