CODEWITHSUNDEEP
htmlcssunicode
user1746732
user1746732

Reputation:

css ::before attr() and unicode

I have a tag with an attribute containing an unicode representing an icon. I would like to make a css rule to this tag ::before to set the content to the unicode. But the unicode is printed and not interpreted.

CSS :

i::before
{
  content: attr(icon);
}

HTML :

<i icon='\f1e8'></i>

It is even possible ?

PS : It seems I'm forced to find a trick since I'm working over a Shadow DOM in which @font-face does not work and the icon attr will be data-binded...

Upvotes: 2

Views: 666

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You need to use UTF-8 characters for use in html. Working example is below:

i::before
{
  content: attr(icon);
}
<i icon='&#xf1e8;'></i>

Upvotes: 3

Related Questions