James123 James123 - 2 months ago 40
CSS Question

font-awesome not working bundleconfig in MVC5

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

As described in this article, 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.

MSDN link: CssRewriteUrlTransform

Comments