CSS attr() - Set FontAwesome glyph dynamically inside before/after

Question

I'm trying to dynamically set a FontAwesome glyph inside a span or a button through the CSS property attr(property).

What I would like to have is to set an attribute on the tag

<button glyph="\f005"></button>

and then use it in the CSS file like this

button::before{
     content: attr(glyph)
}

But it looks like it doesn't work and it just display the code I've written in the tag. Is there a way to "render" the code or to make the CSS consider it as an escaped character?

Take a look at this Fiddle for a quick example.

Answer 1

Try setting the value of the glyph attribute to a HTML entity, such as glyph=""

Answer 2

First of all, your CSS should be button::before or button::after, not only button. You can use content only in these.

Second, in HTML, you write entities like &XXXX;, not \XXXX, you mixed it up a little. Imagine it that the entity becomes single character and then it is transferred into CSS, not in another way. In HTML, you need to use HTML entities and in CSS, use CSS entities, even though they will travel through both languages in some way.

And third, don't use non-standard attributtes like glyph. They should be prepended with data-.

See http://codepen.io/ondrakoupil/pen/XbBvzV