Icomoon working with classes but no with the "data" attribute

[clararol...@gmail.com]

Hi, I'd like to use Icomoon with the "data-icon" attribute but I can't make it work, I keep getting the characters as they are and not the icon.
If I try to use a class instead, it works perfectly.

So for example if I do

<span data-icon="\e000" aria-hidden="true">Text</span>
What I get is the \e000 displayed

But if I try
<span><i class="icon-name"></i>Text</span>
I can see the icon

My CSS is:

//When I use data-icon
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

//When I use classes
.icon-name {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
vertical-align: middle;
}
.icon-name:before {
content: "\e000";
}

Any ideas? I can't understand why the font seems not to be loading when I use data-attribute but it does if I use a class. Can't be a path problem...

[clararol...@gmail.com]

Ok I got the answer to that, it was a RTDS (Read The Docs, Stupid) issue.

From the icomoon docs:
"The value of this attribute should be the character (or its HTML entity) that was assigned to your icon. You can find HTML entities of your icons by opening the generated index.html file."

So in my HTML
<span data-icon="\e000" aria-hidden="true">Text</span> --> WRONG, that's for CSS only
<span data-icon="&#xe003;" aria-hidden="true">Text</span> --> RIGHT, in the HTML you need the HTML entity

Hope it helps!

[burk...@gmail.com]

Though me helped it not :(
My generated html file doesn't have any other values other than of "\e000" type. The one I generated last year using old version had data-attributes values, but new seems not to work...