font-awesome not working bundleconfig in MVC5

asp.net-mvc-5, css, font-awesome, fonts, twitter-bootstrap

Solution

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

Problem

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?

Original source