CSS attr () - Set FontAwesome font dynamically inside before / after
I am trying to dynamically set FontAwesome glyphs inside a range or button via the CSS attr (property) property .
I would like to set the tag attribute
<button glyph="\f005"></button>
and then use it in a CSS file like this
button::before{
content: attr(glyph)
}
But it looks like it doesn't work and it just displays the code I wrote in the tag. Is there a way to "render" the code, or make CSS think of it as an escaped character?
Take a look at the Fiddle for a quick example.
source to share
First of all, your CSS should be button::before
or button::after
, not only button
. You can content
only use them.
Secondly, in HTML, you write type objects &XXXX;
, not \XXXX
, you mixed it up a bit. Imagine the object becomes a single symbol and then gets passed to CSS and not in another way. In HTML, you need to use HTML entities and CSS, use CSS entities, even if they somehow pass through both languages.
And third, don't use non-standard type attributes glyph
. They must be added using data-
.
source to share