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.

2 Replies to “Font Icons Not Displaying in Internet Explorer IE 9 / 10”

  1. 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?

Leave a Reply to InteractiveWebs Cancel reply