CODEWITHSUNDEEP
htmlasp.net-mvc-3icons
Ben Cameron
Ben Cameron

Reputation: 4433

html data-icon not rendering in IE (MVC3 application)

I have an asp .net MVC3 app that is working mostly as it should.

I am using data-icons instead of images in some places. These are rendering fine in all browsers apart from IE (v9). I am wondering why this is and what I can do to fix it?

For example I have a span which renders html that looks like the below... 

<span class="navIcon" aria-hidden="true" data-icon=""/>

In most browsers it renders like this...

working icon

But in IE it renders like this...

broken icon

Does anyone know why this would be happening?

Upvotes: 0

Views: 239

Answers (1)

tpeczek
tpeczek

Reputation: 24125

The most probable reason is that IE9 choose not to use any of the formats you have defined in the @font-face (for example IE9 is known from skipping the .eot and keep looking for .woff version). I suggest you use something like Webfont Generator in order to get all the different font variations. In the result your @font-face should be similiar to this:

@font-face {
    font-family: 'Pictos';
    src: url('pictos-web.eot');
    src: local('☺'), 
    url('pictos-web.woff') format('woff'), 
    url('pictos-web.ttf') format('truetype'),
    url('pictos-web.svg#webfontIyfZbseF') format('svg');
}

Upvotes: 2

Related Questions