I'm using font awesome in my project(mvc/asp.net). My problem is, I was debugging the project and check on localhost, there was no problem with font awesome icons. But when published the website and check on web, instead of icons, i saw small boxes. I'm sure that it's placed in right directory(where css files placed).
I couldn't find any proper solution.
By the way there is also no problem with buttons. They are all ok but icons are gone.
Thanks
I've just loaded your webpage and checked the net tab of firebug.
your following urls returned a 404:
http://www.senocakonline.com/Content/font/fontawesome-webfont.woff
http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf
i would assume that those being missing is the reason your icons aren't displaying.
UPDATE: 23.10.2015 to make it available just add this code to your WebConfig:
Why font-awesome works on debug mode but not on IIS?
In Visual Studio, by default, some font files are not including during Publish:
This is because their build action is set to None, this is by default (on MVC, not sure on WebForms). You must go to the affected file's properties and set it from "None" to "Content".
This is how I solved it (not by manually dragging the files as some may suggest)
Credits goes to this guy: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html
I had the same problem. The solution:
Open CSS file and delete the current font-face section and replace with these:
@font-face { font-family: FontAwesome; src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */ url('/Content/fonts/fontawesomewebfont.svg'), url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */ font-weight: normal; font-style: normal; } (change the font-face values as you want)
Copy your ttf font file on your desktop then convert to eot
Convert ttf font file to svg
Convert ttf font file to woff (optional)
Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.
Publish your project
Another solution that solved this issue for me can be found here: https://stackoverflow.com/a/12587256/615285
Quoting from there:
The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.
The easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:
new StyleBundle("~/Static/Css/bootstrap/bundle") We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.
bundles.Add(new StyleBundle("~/bundles/publiccss").Include( "~/Static/Css/bootstrap/bootstrap.css", "~/Static/Css/bootstrap/bootstrap-padding-top.css", "~/Static/Css/bootstrap/bootstrap-responsive.css", "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform())); It depends on this code line in BundleConfig:
BundleTable.EnableOptimizations = true; if it is true, you have to change your Font files's path;
../ is shows root path, main folder of your project. And then you have to write rest of the path.
Mine. When it's true:
font-family: 'Icons'; src:url('../_include/css/fonts/Icons.eot'); src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'), url('../_include/css/fonts/Icons.woff') format('woff'), url('../_include/css/fonts/Icons.ttf') format('truetype'), url('../_include/css/fonts/Icons.svg#Icons') format('svg'); font-weight: normal; font-style: normal; When it's false:
font-family: 'Icons'; src:url('fonts/Icons.eot'); src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'), url('fonts/Icons.woff') format('woff'), url('fonts/Icons.ttf') format('truetype'), url('fonts/Icons.svg#Icons') format('svg'); font-weight: normal; font-style: normal; It is also a MIME TYPE problem in the IIS, just add the file extension .woff and it will work
In my ASP.NET MVC project with bundling enabled in BundleConfig.cs what worked was this:
Open the file font-awesome.css and change @font-face to this:
@font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.2.1'); src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal; } I had to add ../ before each url.
I had the same problem. Fonts were shown on local properly but when I uploded it to server, only blank squares were shown.
Sometimes it may happen because the filename mentioned in FontAwesome CSS file src attribute is different from the actual font file name. In my case I found it like this in fontawesome css file:
@font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.2.1'); src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont_aea8981c.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal; } font/fontawesome-webfont_2d2816fe.eot font/fontawesome-webfont_aea8981c.eot font/fontawesome-webfont_aea8981c.ttf font/fontawesome-webfont_aea8981c.woff
though the name didn't match properly in css file after underscore, it was working fine on local. So it was hard to tell what was the probable cause for that.
When I edited the name of file in FontAwesome css file src to the exact actual names, it worked.