jquery - Setting element data-icon with JavaScript -


i have following button element in html

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

on jquery ready event, run following code:

$('#play-pause').attr('data-icon', '&#xe00a;') 

that turns html element this

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

which renders in browser (chrome stable):

play pause button

however, if delete javascript code, manually change html following (it's same thing js waas doing) , refresh page:

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

then renders this:

play pause button rendered properly

what's difference?

i suspect it's irrelevant here's css:

/* use following css code if want use data attributes inserting 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; } 

use unicode value:

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

Comments

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -