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/

Borne

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>

Unlace

To your alternative answer: if I work in a code with only an unicode ("\25B6" in this case), can I transfer it to "▶"? So I can then set data-attribute later? – Borne

@HoneyBadgerJunior: I'm not sure what you mean, could you clarify? – Unlace

I set my data-attribute with JS and all I can work with is unicode. What I meant was: can I transform unicode into a concrete character purely in JavaScript? And then set this character into a data-attribute like you pointer out in your alternative solution. Hope I made my point more understandable :-) – Borne

@HoneyBadgerJunior: Yes, you should be able to. How you do that is a separate question entirely, but yes, it's possible :) – Unlace

that note about reactive is very helpful. It also works for Private Use if you make your own fonts that have icons assigned to private use. <span aria-hidden="true" :data-icon="'\ue041'"></span> works with same css content: attr(data-icon); – Puling

Answer 2

If you're setting the data-icon attribute dynamically using JavaScript, and you can't hard-code the emojis like I couldn't, you have to use String.fromCodePoint():

DivElement.dataset.icon = String.fromCodePoint("0x25B6");
// yields: <div data-icon="▶">Title</div>

Nuri

Answer 3

you can uss css triangle for arrow. http://jsfiddle.net/Lqgr9zv6/3/

div{
position:relative;
text-indent:12px;
}


div:before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #000;
}

Bostwick

Yes you can, but triangle in this case was just an example. Instead of this triangle can be used pretty much every icon. On the other hand - yes - this is way to get the desired output :-) – Borne