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

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  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";
}