Skip navigation

Monthly Archives: June 2014

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.

foundation-icons

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.

Then make sure you actually call that bundle in your BundleConfig.cs:

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

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:

Happy Happy Joy Joy

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