20

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/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
OutOfSpaceHoneyBadger
  • 986
  • 2
  • 8
  • 18

3 Answers3

24

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 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? – OutOfSpaceHoneyBadger May 07 '15 at 10:13
  • @HoneyBadgerJunior: I'm not sure what you mean, could you clarify? – BoltClock May 07 '15 at 10:23
  • 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 :-) – OutOfSpaceHoneyBadger May 07 '15 at 10:45
  • @HoneyBadgerJunior: Yes, you should be able to. How you do that is a separate question entirely, but yes, it's possible :) – BoltClock May 07 '15 at 10:46
  • 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. `` works with same css `content: attr(data-icon);` – kaplan Oct 21 '19 at 17:16
1

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>
Prid
  • 1,272
  • 16
  • 20
-1

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;
}
Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
  • 1
    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 :-) – OutOfSpaceHoneyBadger May 07 '15 at 10:22