I have the following button element in my HTML

<button id="play-pause" aria-hidden="true"></button>

On the jQuery ready event, I run the following code:

$('#play-pause').attr('data-icon', '')

That turns the HTML element into this

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

Which renders like this in the browser (Chrome stable):

However, if I delete the JavaScript code, manually change the HTML to the following (it's the same thing as the JS waas doing) and refresh the page:

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

then it renders like this:

What's the difference?

I suspect it's irrelevant but here's the CSS:

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: '45sound';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-style:normal;
}

I have the following button element in my HTML

<button id="play-pause" aria-hidden="true"></button>

On the jQuery ready event, I run the following code:

$('#play-pause').attr('data-icon', '')

That turns the HTML element into this

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

Which renders like this in the browser (Chrome stable):

However, if I delete the JavaScript code, manually change the HTML to the following (it's the same thing as the JS waas doing) and refresh the page:

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

then it renders like this:

What's the difference?

I suspect it's irrelevant but here's the CSS:

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: '45sound';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-style:normal;
}

• javascript
• jquery
• css
• html

• are you using jquery UI buttons? – km6zla Commented May 21, 2013 at 23:12

1 Answer 1

Use Unicode value:

$('#play-pause').attr('data-icon', '\uE00A');