What they don’t tell you about Foundation Icons, ASP.NET MVC bundles, and Azure

The Foundation Icon Fonts 3 pack is pretty cool. Not the best selection, and way too many stupid “social & brand icons” (MySpace? Really?), but I figure if I’m going to use Foundation anyway, why not. And since I’m living in ASP.NET MVC land these days, the official way to go about adding them to my web application is to chuck them into a bundle. That’s a nice, clean way to keep things organized and optimized. So, I did it, but it didn’t work very well once pushed to Azure. The icons wouldn’t load and I got weird 404s and 500s… What gives?

Well, I spent more time than I’d care to admit trying to figure out why something I figured was going to be simple and easy… wasn’t. Here’s what I discovered it took to get those icons working in this particular environment, and I hope it saves someone a little time.

First things first, the files need to be in there, so you’ll want something like the structure I’ve got.

Then comes bundling. You could just throw it into your primary Foundation bundle, but here it is in its own. Line 10 is the real magic because of the
CssRewriteUrlTransform added to
Include(). It’s kind of a big deal because it forces any URLs in your CSS file to cooperate with the MVC routing. And for being so crucial, it shouldn’t have been so hard to find.

Same deal in your
_Layout.cshtml or wherever else you may want to do it:

Views/SomeView/_Layout.cshtml

ASP

1

@Styles.Render("~/stylebundles/foundation-icons/css")

And finally, one more “guess the password” type of requirement (that’s my way of saying you’d probably never, ever figure it out unless someone shared it with you). In your
Web.config, you need to add these MIME mappings so everything will load correctly across all browsers. Why you have to explicitly set this instead of it being default behavior is stupid and beyond my comprehension:

Web.config

XHTML

1

2

3

4

5

6

7

8

9

10

<system.webServer>

<staticContent>

<remove fileExtension=".woff" />

<mimeMap fileExtension=".woff"mimeType="application/x-font-woff" />

<remove fileExtension=".ttf" />

<mimeMap fileExtension=".ttf"mimeType="application/octet-stream" />

<remove fileExtension=".svg" />

<mimeMap fileExtension=".svg"mimeType="image/svg+xml" />

</staticContent>

</system.webServer>

There you have it. After I did those magical things and published to Azure, the icons showed up. Ridiculous.