Icons displayed are different between browsers

[cla...@gmail.com]

I have an issue with IE rendering the incorrect icons on my website. FF, Chrome etc all render the correct icon, but in IE the icons displayed are different. It is displaying icons from my library but it's the wrong ones!

Any advice?

[Keyamoon]

Are you using CSS properties that alter the character? For example, text-transform: uppercase; could be causing this.

Another thing that could be causing this is having installed a local font with the same name as the one you're defining in your @font-face.

[cla...@gmail.com]

Ok I appear to have fixed the above issue, there was a couple of CSS conflicts, but now it appears that on load 2 instances of the one icon is loaded side by side.

My implementation of the button is as follows:

HTML
===========================================================
<a href="#" class="ua-button" target="_self" title="Share">
<span aria-hidden="true" data-icon="&#xe08a;"></span>
<span class="screen-reader-text">Share</span>
</a>

CSS
===========================================================
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[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;
}


On render this is what Firebug shows is rendered in the HTML

<a href="#" class="ua-button" target="_self" title="Add to Cart">
<span aria-hidden="true" data-icon="">
<span style="font-family: icomoon;"></span>
</span>


Screenshot of duplicate icon
http://i.imgur.com/KtZXy6y.jpg

[Keyamoon]

Are you loading the lte-ie7.js file? You should only load it with those conditional IE comments. Take a look at the generated index.html file.

[cla...@gmail.com]

silly me, I had taken out the conditions during my process of elimination, thanks a lot for all your help!