Why font-awesome works on localhost but not on web ?

Question

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

Can you show the link to the site? Or Check source path. Have you copied icons to the publish folder? — Kaf, Feb 15 '13 at 12:48
Are you using icons locally and if so have you copied them to publish folder? which icons are missing on the given link. I can't see any missing boxes. — Kaf, Feb 15 '13 at 13:47
On the footer part, near the social media and other infos, I used font awesome icons. As far as I know, it is not needed to include icon files with font awesome.It generates the icons itself. ex: generates the facebook icon etc.. — ethelrsn, Feb 15 '13 at 14:25
You could see this thread about fonts not rendering properly. http://stackoverflow.com/questions/32692151/fonts-are-not-rendered-correctly-in-release-mode-but-is-working-on-debug-mode-i?answertab=votes#tab-top — decodingpanda, Sep 23 '15 at 03:38

score 73 · Accepted Answer · edited Oct 23 '15 at 22:50

73

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:

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

edited Oct 23 '15 at 22:50

Tigran Hakobyan

3
3

answered Feb 16 '13 at 10:55

AdamWhite

1,044
2
10
10

2

i had the same issue to access font awesome fonts, for **other solutions** try these links which deals with `StyleBundle` **virtualpath**: [Link 1](http://www.mvccentral.net/story/details/articles/kahanu/stylebundle-403-error-solved) , [Link 2](http://forums.asp.net/t/1774324.aspx?MVC4+css+bundling+and+image+references), [Link 3](http://ericpanorel.net/2013/10/25/font-awesome-4-0-mvc-bundling-and-minification/), [Link 4](http://jameschambers.com/2014/08/adding-some-font-awesome-to-mvc-and-bootstrap/) , hope this helps someone. – Shaiju T Feb 25 '16 at 09:36
Wow - I _totally_ didn't know about this. After raging about these WOFF files causing 404s - your answer nailed it. Thank you! – Rob Cooper Aug 27 '16 at 12:49
1

Glad I was able to find this right away and not spent hours - as with too many other things asp.net to mention. – Vasily Hall Apr 26 '17 at 21:15

Yorro · Answer 2 · 2015-02-26T05:54:54.713

34

Why font-awesome works on debug mode but not on IIS?

In Visual Studio, by default, some font files are not including during Publish:

.eot
.json
.ttf
.woff

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".

enter image description here

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

edited Feb 26 '15 at 05:54

answered Dec 23 '13 at 07:18

Yorro

11,445
4
37
47

8

glad to be of help :) – Ed Sykes Jun 16 '14 at 10:59
those files are set to Content by default but glad it helped other people. It is also not font-awesome specific but rather to the files extensions – usefulBee Aug 13 '15 at 20:59
1

I tried everything else and was happily surprised that this was the correct answer. Thanks, never even crossed my mind that this was an issue to be aware off. Again thanks. – flavour404 Feb 09 '16 at 00:22

score 10 · Answer 3 · edited May 23 '17 at 12:02

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()));

score 8 · Answer 4 · edited Aug 23 '13 at 06:37

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

http://www.kirsle.net/wizards/ttf2eot.cgi
Convert ttf font file to svg

http://www.freefontconverter.com/
Convert ttf font file to woff (optional)

http://ttf2woff.com/
Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.
Publish your project

Yes, it is all to do with putting the files in the right folder. — arame3333, Aug 16 '17 at 13:08

Ebleme · Answer 5 · 2016-02-18T13:46:54.300

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;

score 1 · Answer 6 · answered Sep 22 '15 at 16:57

1

It is also a MIME TYPE problem in the IIS, just add the file extension .woff and it will work

answered Sep 22 '15 at 16:57

Bachask8

310
1
7
18

Michael Mora Montero · Answer 7 · 2018-04-12T13:49:29.083

1

this worked for me : < link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />

I had to link the Directly URl

edited Apr 12 '18 at 13:49

answered Apr 10 '18 at 15:17

Michael Mora Montero

21
4

1

thanks for answering. If you comment is part of the answer, you can edit the answer and put it in there. BTW, what is a "Directly URI"? (I know what a URI is, I just have never seen). – Jay Elston Apr 10 '18 at 15:44

score 0 · Answer 8 · answered Jan 23 '14 at 14:39

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.

An anonymous user [suggests](http://stackoverflow.com/review/suggested-edits/5269701) to do a style override in another file, like custom.css, instead of editing the original font-awesome.css source. — Vi., Jul 10 '14 at 17:50

score 0 · Answer 9 · answered Sep 17 '15 at 09:45

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;
        }

But the actual font file names wese like these-

        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.

score 0 · Answer 10 · answered Apr 18 '19 at 11:57

Nothing realy worked for me. I have a Webform page that hosts an angulular application. The angular application uses the webfonts.

The trick with CssRewriteUrlTransform() was the right direction, but then I found this extension for bundleing that did the final solution!

AspNetBundling

You don't have to use the hole extension, just copy the CssRewriteUrlTransformFixed class and use it instead of the original.

score 0 · Answer 11 · answered May 03 '19 at 14:50

I have tried all suggestions above, and none of them work. Then I tried to move font CSS file to different CSS file, and magic has happen. Everything start to work without any problems. Note you can later on bundle new CSS file through your bundle file.

Why font-awesome works on localhost but not on web ?

11 Answers11

Linked