How to use data attributes with Font Awesome?

Question

I want to convert a rel content into a Font Awesome CSS icon, so I won\'t have to write 20 lines for a simple menu.

Maybe some code would make it easier to

Answer 1

Although the question may duplicate to this post. In a simple word - you'll need to use HTML entity, or the unicode character itself, in order to use it in CSS content property.

However it's a very interesting idea to use the technique with Font Awesome, so I'm writing this answer, and adding the extra info for it.

I'd suggest to use data attributes data- instead of rel, as rel is designed for link types.

And on this page has a complete set of Font Awesome unicode tables. You can either copy/paste the unicode character, or the icon itself. Examples below:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

a::before {
  font-family: 'FontAwesome';
  content: attr(data-fa-icon);
}

 Unicode example
 Icon example