font-awesome not working bundleconfig in MVC5
If I direct refer to font-awesome.css in _layouts page. it will work
But I used in BundleConfig.cs. Icon is not showing.
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?
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
My solution was simple: run PM> Install-Package FontAwesome, and
reference the correct path:
I had the same error message and fixed after setting mime types for web fonts in IIS .
With version 5.1.0 I had to reference
all.css instead of
bundles.Add(new StyleBundle("~/bundles/fontawesome").Include( "~/Content/all.css", new CssRewriteUrlTransform() ));
I also had this same error message. I had to do a combination of the answers listed in this thread:
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…
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.
I add another answer to this question has I found the solution by mixing some of them.
- Most voted answer is the main solution, but it is also important to
- Add the entry suggested by this answer. Finally
- 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.