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?

Solution 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

Solution 2

My solution was simple: run PM> Install-Package FontAwesome, and reference the correct path:

.Include("~/Content/font-awesome.min.css")

Solution 3

I had the same error message and fixed after setting mime types for web fonts in IIS .

Solution 4

With version 5.1.0 I had to reference all.css instead of fontawesome.css i.e.,

bundles.Add(new StyleBundle("~/bundles/fontawesome").Include(
    "~/Content/all.css",
    new CssRewriteUrlTransform()
));

Solution 5

I add another answer to this question has I found the solution by mixing some of them.

1. Most voted answer is the main solution, but it is also important to
2. Add the entry suggested by this answer. Finally
3. Follow the comment from @feradz in most voted answer: "delete the .min.css version -- it was causing the optimizer to not generate a minified version with the correct path"

Last point is the key of all: distributed "min" versions of the js files, does not follow the "CssRewriteUrlTransform" rules. So, manually deleting bootstrap.min.css, font-awesone.min.css definitively solved the issue.

View more solutions

Comments

[miha]

Make sure that you either fix paths inside font-awesome.min.css as well (or just remove this file, as bundling will minify your css anyway). Otherwise it might pickup the .min.css file and transforms will not happen.

[feradz]

In my case I had to delete the .min.css version -- it was causing the optimizer to not generate a minified version with the correct path

[Gary McGill]

This. I'm using FontAwesome 4.2 from NuGet, and this is all it took (although it makes no sense to reference the ".min" version of the file, since bundling will take care of minification for you).

[Shaiju T]

i had the same issue to access font awesome fonts, for other solutions try these links which deals with StyleBundle virtualpath: Link 1 , Link 2, Link 3, Link 4 , hope this helps someone.

[Rudey]

If your application is hosted inside a virtual directory in IIS, you'll have to override CssRewriteUrlTransform to take this into account. You can find an example of that here on stackoverflow, just google "CssRewriteUrlTransform virtual directory".

[Faisal Mq]

I have also noted that when you add a bundle, it should not coincide with some real path of your site. e.g if you are creating a bundle like so bundles.Add(new StyleBundle("~/Content/fontawesome").Include("~/Content/font‌​-awesome/css/font-aw‌​esome.css")) then there should not be actual font-awesome folder present under your site's Content folder, otherwise it will give you a runtime weird error.

[Fermín]

Thanks!! That fixed my issue!

[nim_10]

I followed the article and removing mime-types and re-including in web config solved the problem. Also I had to move the font-awesome.min.css file under /Content directory and moved the fonts under /fonts.

[Sh7ne]

Include("~/~/~/font-awesome.css", new CssRewriteUrlTransform())); Don't forget the last ).