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?

Answer 1

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

{
   "library": "[email protected]",
   "destination": "wwwroot/lib/fontawesome",
   "files": [
      "css/all.css",
      "js/all.js",
      "webfonts/*"
      ]
}

Answer 2

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:

1. 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.
2. 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.

Answer 3

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.

Answer 4

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

Answer 5

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