Font Icons Not Displaying in Internet Explorer IE 9 / 10

With the Bulk Emailer application we have used font icons to improve response and scalability with different devices. So far we have been happy with how they work using some boot strap code that is used for our user interface.

What we have noticed, and it’s no big surprise… Internet Explorer 9 and IE 10 will not display font icons correct.

What you should see is this:

image

But ends up rendering like this:

image

The Problem is WOFF Fonts on IIS

For IIS 6 and later, they do not handle WOFF fonts as icons for Internet Explorer. Most other browsers will support them, however IE like usual will behave like a black sheep.

There appears to be two solutions to this problem.

Solution 1 – Adding a MIME type to Internet Information Server IIS

Add the following MIME type to the IIS server settings.

  • .woff application/x-woff
    1. Open IIS Manager and navigate to the level you want to manage. For information about opening IIS Manager, see Open IIS Manager (IIS 7). For information about navigating to locations in the UI, see Navigation in IIS Manager (IIS 7).

    2. In Features View, double-click MIME Types.

    3. In the Actions pane, click Add.

    4. In the Add MIME Type dialog box, type a file name extension in the File name extension text box. For example, type .xyz.

    5. Type a MIME type in the MIME type text box. For example, type application/octet-stream.

    6. Click OK.

image

Solution 2 – Adding some code to the web.config

A lot of people don’t have access to configure IIS in DotNetNuke, so you can add the following to the web.config.

Under the yellow below add the green lines

<system.webServer>
    <staticContent>

       <mimeMap fileExtension=”.woff” mimeType=”application/x-font-woff” />
    </staticContent>
  </system.webServer>

This should get you out of trouble.

About InteractiveWebs

This blog is the combined blog work of the InteractiveWebs Dev Team. Together we work on a range of DotNetNuke (DNN) applications, modules, Silverlight, and Microsoft CRM Portal integration products.

Our Business is website design and hosting, with a strong focus on DotNetNuke, Microsoft Dynamics CRM, Silverlight and iPhone iPad development.

Tagged . Bookmark the permalink.

2 Responses to Font Icons Not Displaying in Internet Explorer IE 9 / 10

  1. Michael says:

    I have the same issue glyphicons are not showing in IE 11, however, they are showing in FF. We have all MIME types correctly set. Any idea why we have this issue?

    • Apart from IE being a bucket of crap. I can only suggest that if it is something you need to use, that you go into compatibility mode F12 and drop to another release to see if that helps.

Leave a Reply to Michael Cancel reply

Your email address will not be published. Required fields are marked *