I have a MVC 4 web project and I used FontAwesome in my code. It works perfect in development environment, but the FontAwesome icon does not show up in production environment.
I used style bundling:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/menu.css", "~/Content/font-awesome-4.0.3/css/font-awesome.css"));
Using Fiddler tool, I can see the HTTP GET for the style bundle is:
GET /Content/css?v=1fdJNYlrmyYR2zfWNxGwp9byu_Xm_F8yrFMQHaWibnk1 HTTP/1.1
As you can see, the virtual path for the bundled style is under /Content
In my site, I have this following folder structure in /Content
Open "font-awesome.css" file, at the beginning of the file, you can see the font-face definition:
The relative path here assume the style sheet is loaded from "/Content/font-awsome-4.0.3/css", so the "../fonts" will point to "/Content/font-awesome-4.0.3/fonts" folder. However, in case of style bundling, the virtual path where the style sheet is loaded has changed to "/Content". Therefore, the FontAwesome can not find the desired font file.
In order to make it work, I changed the url part "../fonts/" to "./font-awesome-4.0.3/fonts/". After that, everything works as expected.
Note: you need to change both font-awesome.css and font-awesome.min.css files. The latter is actually the one used in release mode.
Conclusion:
The virtual path in style bundle and script bundle has important meaning. It changes the path the style or script files are actually loaded. Therefore, you have to pay much attention to it. It may break your application in production environment.
I used style bundling:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/menu.css", "~/Content/font-awesome-4.0.3/css/font-awesome.css"));
Using Fiddler tool, I can see the HTTP GET for the style bundle is:
GET /Content/css?v=1fdJNYlrmyYR2zfWNxGwp9byu_Xm_F8yrFMQHaWibnk1 HTTP/1.1
As you can see, the virtual path for the bundled style is under /Content
In my site, I have this following folder structure in /Content
Open "font-awesome.css" file, at the beginning of the file, you can see the font-face definition:
The relative path here assume the style sheet is loaded from "/Content/font-awsome-4.0.3/css", so the "../fonts" will point to "/Content/font-awesome-4.0.3/fonts" folder. However, in case of style bundling, the virtual path where the style sheet is loaded has changed to "/Content". Therefore, the FontAwesome can not find the desired font file.
In order to make it work, I changed the url part "../fonts/" to "./font-awesome-4.0.3/fonts/". After that, everything works as expected.
Note: you need to change both font-awesome.css and font-awesome.min.css files. The latter is actually the one used in release mode.
Conclusion:
The virtual path in style bundle and script bundle has important meaning. It changes the path the style or script files are actually loaded. Therefore, you have to pay much attention to it. It may break your application in production environment.
Comments