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?

score 5 · Accepted Answer · answered Mar 04 '13 at 13:08

5

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.

answered Mar 04 '13 at 13:08

Mike Samuel

118,113
30
216
245

I'm using an icon font that I've generated through IcoMoon, so that is the correct id. And it works! Thanks. – ThisLeeNoble Mar 04 '13 at 13:15
@user1879785, understood -- icoMoon must create and load a custom font. – Mike Samuel Mar 04 '13 at 13:28

Salman A · Answer 2 · 2013-03-04T12:56:22.883

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.

edited Mar 04 '13 at 12:56

answered Mar 04 '13 at 12:21

Salman A

262,204
82
430
521

That gets me a "à" in the data-icon attribute when I view the HTML in the web inspector, but at least no `&`. Might be on the right track... – ThisLeeNoble Mar 04 '13 at 12:27
That is indeed very hackish, but it does indeed work. Thanks very much. I'm still open to neater solutions if there are any. – ThisLeeNoble Mar 04 '13 at 13:08

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

2 Answers2