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:
But ends up rendering like this:
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
-
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).
-
In Features View, double-click MIME Types.
-
In the Actions pane, click Add.
-
In the Add MIME Type dialog box, type a file name extension in the File name extension text box. For example, type .xyz.
-
Type a MIME type in the MIME type text box. For example, type application/octet-stream.
-
Click OK.
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.