Using attr(data-icon) property to display unicode before element

Question

Lets demonstrate an example with simple HTML code like this:

<div data-icon="\25B6">Title</div>

I would like this element to have an prefix icon set by it's data attribute (data-icon) so I set CSS file like this:

div:before {
    content: attr(data-icon);
}

My desired output of this example would look like this:

▶Title

Instead of desired output all I can get is this:

\25B6Title

So my question is: what am I doing wrong / what am I missing?

JSFiddle example: http://jsfiddle.net/Lqgr9zv6/

Answer 1

CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string.

If you want to encode the character within an HTML attribute, you need to encode it as an HTML entity. This will be seen by CSS as the corresponding Unicode character. Since this is a hexadecimal escape sequence you can transliterate it like so:

<div data-icon="&#x25B6;">Title</div>

Alternatively you can just use the Unicode character itself:

<div data-icon="▶">Title</div>

If the attribute's value needs to be reactive in Vue or any of the now popular JavaScript frameworks, use the JavaScript escape sequence notation, within a JavaScript string (if you're confused, just pay attention to the nested quotes in the following example):

<div :data-icon="'\u25b6'">Title</div>