Font Awesome 4.0 MVC Bundling and Minification

I had a couple of Asp.Net projects, particularly Single Page Applications created using either angularJS or DurandalJs frameworks. Since I am not the greatest graphic web designer, I often style my boilerplate code, with free css/javascript framework libraries like jQueryUI etc… I recently had been using Font Awesome icons to further style web pages.

Prior to version 4.0 which was released today, everything works (i.e. the icons are there). I upgraded today, and poooof, the icons were gone!

First of all you will need to change the syntax on how you make the icons appear on your content.

Version 3.xxx:

<i class="icon-camera-retro"></i> Some Label

Version 4.0:

<i class="fa fa-camera-retro"></i> Some Label

Bundling and Minification

The previous bundling and minification code, looks like this:

image

But after the upgrade, it doesn’t work!!!

I did some comparison between the previous Font Awesome css file and saw these differences:

Version 3.2.1:

image

Version 4.0.0:

image

Of course the directory structure changed too (installed via nuget)

Version 3.2.1 (ignore the other font files):

image

Version 4.0.0:

image

So how do we fix this?

There’s a little know class called CssRewriteUrlTransform in the Sytem.Web.Optimization namespace that will help us solve this issue, or any css file that references url relative resources. The new code would now look something like:

image

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.
Tagged with: ,
Posted in ASP. Net
  • ziyasal

    Excellent post, you are life saver!

  • Rob H.

    Brilliant!

  • http://jakejgordon.wordpress.com Jake

    Would not have figured this out. Thanks!

  • Peter Albert

    Thanks! This finally solved my problem!

  • Mithun Midhu

    Wow !!! Thanks :)
    It helped me a lot.

    Thanks once again :)

  • Alexander

    Thank you very much! It helped me.

  • Leandro Camilo

    This don’t works if your website served under a folder, like http://domain.com/yoursite. The CssRewriteUrlTransform change to /content/xx.woff and not /yoursite/content/xx.woff. How to solve this problem?

    • gm

      Hey Leandro! I am facing the same issue. were you able to resolve it?

  • Pratik Thakker

    Thanks! this approach worked for me.

  • Shyam

    Excellent Post. Thank you

  • Bryan

    Very helpful, thanks for the write up!