Why does CDN work, but a relative link does not?

0
votes

I just asked this question: Why is Font Awesome only showing a square?.

The gist of it is that my font-awesome.min.css file was not working. I was getting 404 errors when trying to load icons from it. Someone gave the ridiculous suggestion of changing:

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

to

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

I tried their suggestion with confidence that it would not change anything, but it worked!

The code in MyProject/font-awesome/css/font-awesome.min.css (the filepath is correct) is identical to the code at //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css.

Why is it that the CDN works, but my local copy gives me 404 errors?

Some clarification:

The file is being found when I try to link to the relative file (not using the CDN). The images within the CSS come up with 404. But with identical code at the CDN, there is no 404 for the images. I get the following error for each respective image:

Failed to load resource: the server responded with a status of 404 (Not Found)  http://localhost:63343/MyProject/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0
2
csscdnfont-awesome
Is the page you are viewing at the same level as font-awesome or further down? - zimdanen
@zimdanen MyProject/index.html is where I am viewing it. The top-level folder. - Evorlor
@Barmar that is where it is. - Evorlor
Can you check the server's access log to see what folder it's looking in when it gets the 404 error? - Barmar
Sounds like you haven't copied the image files to your server. - Barmar

2 Answers

2
votes

The CSS file refers to font files using relative URLs. So when you copy the CSS, you also have to copy the font folder to MyProject/font-awesome/fonts.

Basically, when you download the Font Awesome ZIP file, you should extract the entire thing into MyProject/font-awesome. This will get you the all the files and they'll be in the proper location.

-1
votes

You are pointing to the absolute url. Try changing it to relative to Home page. Ex: /font-awesome/css/font-awesome.min.css.