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', '') that turns html element this
<button id="play-pause" aria-hidden="true" data-icon=""></button> which renders in browser (chrome stable):

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=""></button> then renders this:

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
Post a Comment