asp fontawesome 404 (not found)

Question

I have this error both on my production IIS7 server and on local iisexpres (after I've set debug="false")

GET http://localhost:64231/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found) jquery-1.11.0.min.js:2
GET http://localhost:64231/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) localhost/:1
GET http://localhost:64231/font/fontawesome-webfont.svg 404 (Not Found)

I've added mime types to web.config. Also I've added they to IIS

  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />

What am I doing wrong?

I suggest you to post your own answer and mark it as accepted instead of editing the question. — fabriciorissetto, Oct 02 '15 at 13:03

score 5 · Answer 1 · answered Oct 06 '15 at 21:55

5

When you set debug value to false, it will automatically enable optimisations for the bundles. Instead of having, in your html generated code (by example) :

<link href="/content/bootstrap-3.3.5.min.css" rel="stylesheet"/>
<link href="/content/font-awesome.min.css" rel="stylesheet"/>

You will have something like this :

<link href="/Styles?v=ca92niiBlGWlTNkBwoMTPgQGz9_5Ghi39pZxcx5Dyfk1" rel="stylesheet"/>

This is why your paths are not correct anymore. I think setting absolute paths is a correct way to resolve this problem.

If you don't want to automatically enable optimization when your application is in release mode (debug="false"), you can add this line to your file /App_Start/BundleConfig.cs :

BundleTable.EnableOptimizations = false;

EDIT : I just seen the date of your question... I came here because I ran into the same issue yesterday. I hope my explanation will help somebody.

answered Oct 06 '15 at 21:55

KevinM

144
3
13

I ended up disabling optimizations but do not know or understand the ramifications just yet. It corrects the issue with the font not loading, but the problem is with the bundling and relative paths. The path is set in the web-icons and font-awesome stylesheets. Why would something like this break the way in which the bundling optimization works in MVC? – clockwiseq Jul 07 '16 at 14:48
1

The fonts path in font-awesome.css is relative : `../fonts/fontawesome-webfont.woff2`. Say your fonts and css are in the `/content/fonts/` and `/content/css/` folder, it will work as expected when you have `debug="false"` because the fonts path will be `/content/fonts/`, but when you change to `debug="true"`, all your css files are now referenced in `/Styles?v=...` and the fonts path will be `/fonts/fontawesome-webfont.woff2`which lead to a 404 error. – KevinM Jul 09 '16 at 07:51
this "BundleTable.EnableOptimizations = false;" work for me, thx – Carlos Henrique Ferracin Oct 04 '19 at 01:53

score 3 · Answer 2 · answered Nov 11 '15 at 21:50

3

The problem was in relative path to fonts. I've replaced it with absolute path url('/content/FontAwesome/font/...');

answered Nov 11 '15 at 21:50

Aray Karjauv

2,679
2
26
44

You mean you modify `font-awesome.css` or `_variables.scss` directly within the package? I installed font-awesome as a bower package and if I'd update the package (and even if it was a NuGet package), it'd overwrite the customization! This sounds like a bad idea. – Csaba Toth Mar 05 '17 at 00:46

score 2 · Answer 3 · answered Feb 10 '18 at 15:05

all last responses don't work for me. I can see that the url requested by the page to the resource is like 'YourWebsite/fonts/fontawesome-webfont.woff2?v=4.7.0'

Then i decide generate the fontawesome bundle with the path "~/bundles/fonts"

bundles.Add(new StyleBundle("~/bundles/fonts") .Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

then worked for me

Csaba Toth · Answer 4 · 2017-03-15T15:15:52.040

For me both modifying font-awesome.css or font awesome's _variables.scss or turning off optimization sounds like a very bad idea. The former would be overwritten by a package update (assuming you are using some package management system - bower, npm, NuGet). The latter would degrade the site's performance. I'll try these:

Install FontAwesome NuGet package instead of bower or npm repositories. That places the font-awesome.css into the /Content directory so the relative ../font/ will point to the right direction as well.
Copy the files (basically duplicating) to /font/ as well. This latter one may cause the two copies to diverge in case of a package update, but wouldn't cause a site to fail.

Finally I went with a NuGet package instead of a bower one and that dropped the css into the /Contents and the fonts into the /fonts. So both Debug and Release works fine.

score 0 · Answer 5 · answered Feb 02 '21 at 04:35

I had a similar problem with ASP core and LibMan. In order to download the required files, I added "webfonts/*" line:

{
   "library": "font-awesome@5.15.2",
   "destination": "wwwroot/lib/fontawesome",
   "files": [
      "css/all.css",
      "js/all.js",
      "webfonts/*"
      ]
}

asp fontawesome 404 (not found)

5 Answers5