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 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';}

Fireworm

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);
}

<p><a href="#" data-fa-icon="&#xf206;"> Unicode example</a></p>
<p><a href="#" data-fa-icon=""> Icon example</a></p>

Farquhar

Thats what i did to begin with ;) I am trying to use a wordpress menu and it keeps regecting characters such as "&#x" - but that a wp problem. Thanks for your help. – Fireworm

Interesting, I did a quick search, this tutorial might be helpful. – Farquhar

Answer 2

There no way to do that in css, because there is no variables. You can use compiled css (like sass). The other way to do that is js. And the third way is to add style inside html in server side.

Puncture

i am using less not sass... can you share an example? – Fireworm

#9523697 y ou van fond more informations here – Puncture