font-awesome not working bundleconfig in MVC5

Question

If I direct refer to font-awesome.css in _layouts page. it will work

<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" /> 

But I used in BundleConfig.cs. Icon is not showing.

 bundles.Add(new StyleBundle("~/Content/css").Include(                         "~/Content/font-awesome-4.0.3/css/font-awesome.css",                         "~/Content/bootstrap.css",                                                  "~/Content/body.css",                         "~/Content/site.css",                         "~/Content/form.css"                      )); 

and also I observed browser console have error to font directory. Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3

what could be the problem?

Answer 1

Try using CssRewriteUrlTransform when bundling:

bundles.Add(new StyleBundle("~/Content/css").Include(         "~/Content/bootstrap.css",                                 "~/Content/body.css",         "~/Content/site.css",         "~/Content/form.css"     ).Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform()); 

This changes any urls for assets from within the css file to absolute urls so the bundling doesn't mess up the relative path.

Docs for CssRewriteUrlTransform