How to use data attributes with Font Awesome?
css, font-awesome
Solution
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);
}
<p><a href="#" data-fa-icon=""> Unicode example</a></p>
<p><a href="#" data-fa-icon=""> Icon example</a></p>
Problem
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 understand. I tried to do this: ``` a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';} ``` Basically I am trying to convert the value inside the `rel` and convert it to a working CSS rule. So the link looks like this: ``` <a href="http://www.example.com" rel="f291">Example</a> ``` The end result should look something like: ``` a:before {content: "\f291")"; font-family: 'FontAwesome';} ```