font-awesome not working bundleconfig in MVC5

CssTwitter BootstrapFontsasp.net Mvc-5Font Awesome

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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 - Css

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

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

Solution 3 - Css

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

Solution 4 - Css

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 - Css

I also had this same error message. I had to do a combination of the answers listed in this thread:

  1. Add this line of code as suggested by @Simon C:

    .Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform());

This worked to fix the relative urls, however, I had to delete the font-awesome.min.css file from my bower directory every time I published otherwise the bundler would get confused and not include and minify the font-awesome.css file. So...

  1. I had to do what @miha suggested in a comment and fix the relative urls in the font-awesome.min.css file with CssRewriteUrlTransform(). So I decided to rewrite the urls in the .min file and just include that instead of the unminified version and it worked:

    .Include("~/Content/font-awesome-4.0.3/css/font-awesome.min.css", new CssRewriteUrlTransform());

If I understand correctly, the bundler won't try to minify the .min file again because it's already minified. The only "drawback" is it does not concatenate the font-awesome.min.css content into the single css file that the bundler creates. It will be included separately.

Solution 6 - Css

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJames123View Question on Stackoverflow
Solution 1 - CssSimon CView Answer on Stackoverflow
Solution 2 - CssSith2021View Answer on Stackoverflow
Solution 3 - CssMarwaAhmadView Answer on Stackoverflow
Solution 4 - CssZerosAndOnesView Answer on Stackoverflow
Solution 5 - Cssbig_waterView Answer on Stackoverflow
Solution 6 - CssGianpieroView Answer on Stackoverflow