Assign a HTML-entity as an attribute value using JavaScript/jQuery

Question

I've been following this technique on css-tricks to add icons to a website: http://css-tricks.com/html-for-icon-font-usage/

I've got this in my CSS:

[data-icon]:before {
  font-family: Symbol;
  content: attr(data-icon);
  speak: none;
}

However, part of my interface is generated using jQuery. Here's one such control:

var $control = $('<div>', {
    'aria-hidden':'true'
    , 'data-icon': '&#57372;'
});

I have tried encoding it as \e01c, \\e01c, , you name it, I've probably tried it. The result is always the same, everything after the ampersand is rendered to the screen because the ampersand comes out as & in the source code or the backslashes show up.

I tried concatenating in the CSS content:

content: "&" attr(data-icon) ";";

and just including the number in the data but the ampersand still shows up encoded on its own.

Is there any way to encode this entity and have it output to the page correctly?

Answer 1

To encode codepoint 57372 in JavaScript, use '\ue01c'.

You should be aware that it won't render well, since unicode defines it as an unassigned codepoint in the private use area":

http://www.unicode.org/charts/PDF/UE000.pdf

Private Use Area

Range: E000-F8FF

The Private Use Area does not contain any character assignments, consequently no character code charts or names lists are provided for this area.

Maybe you meant another code-point.

Answer 2

This is a bit hackish but should work:

'data-icon': $("<span>&#57372;</span>").contents().get(0).nodeValue

Demo here

It works as follows:

$("<span>&entity;</span>") creates a span element with one child of type textNode. .contents() is used to extract all children nodes including the text node, whose nodeValue is then assigned to data-icon attribute.