How to use data attributes with Font Awesome?

问题

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

回答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>

回答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.

来源：https://stackoverflow.com/questions/34596056/how-to-use-data-attributes-with-font-awesome

标签

css

font-awesome