0

I've been banging my head against the wall for a good hour with this stupid problem.

I'm building a website and I'm using Font Awesome. The home page of the site is located in the root (/); a page called fog.html is in /content/books/. The Font Awesome folder (font-awesome-4.6.3) is in /fonts/, so that for example FA's fonts are in /fonts/font-awesome-4.6.3/fonts/.

I reference FA's CSS from the home page like this:

<link rel="stylesheet" href="fonts/font-awesome-4.6.3/css/font-awesome.min.css">

and from fog.html like this:

<link rel="stylesheet" href="../../fonts/font-awesome-4.6.3/css/font-awesome.min.css">

because fog.html is two directories deeper than the home. I checked with the inspector and FA's CSS is properly referenced in both instances.

FA's icons are visible on the home page, but I get blank squares on fog.html. I guessed it must be because FA fonts are referenced by FA's CSS using relative paths, and since the two pages are located in different parts of the directory tree, any relative path I type in there will take me to different places depending on the page the CSS is referenced in.

So I decided I'd just use absolute paths in FA's CSS. I'm doing this on my local PC, so the edited CSS looks like this:

/*! * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */@font-face{font-family:'FontAwesome';src:url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?v=4.6.3');src:url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') [etc]

Regardless of all this mess, FA's icons still show on the home page, but they don't on fog.html. Clearly the absolute path can't be okay from one location and not okay from another, and since FA's CSS appears to be referenced properly on fog.html, I haven't got the foggiest clue why this happens.

Any help would be deeply appreciated!

Nicola
  • 379
  • 3
  • 14
  • Possible duplicate of http://stackoverflow.com/questions/26867795/font-awesome-showing-just-square-box-instead-icon Did you try with the CDN link to see if that works? – Paul Redmond Sep 07 '16 at 14:27
  • Using `file://` will most likely not be allowed (CORS). However, import statements (and font declarations in CSS) are relative to the CSS file, not the file that links to your CSS file. – somethinghere Sep 07 '16 at 14:28
  • Have you properly edited the FA files as mentioned here? http://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares – Nick Barth Sep 07 '16 at 14:38
  • What about using the fontawesome cdn? There may be a reason you don't use that, but you could: `` – john_h Sep 07 '16 at 14:39
  • If you are using a relative path for the css, it needs to be relative to the url of the page - try using `/fonts/font-awesome-4.6.3/css/font-awesome.min.css` instead, then you shouldn't need to change per page. As for the actual font files - these need to be relative to the location of the css file so it shouldn't change between pages – Pete Sep 07 '16 at 15:05
  • @Paul Redmond: CDN appears to work. – Nicola Sep 07 '16 at 15:09
  • @NickBarth Yes, and I think FA icons wouldn't show up anywhere if I hadn't. – Nicola Sep 07 '16 at 15:10
  • @somethinghere: At least locally, there doesn't seem to be a problem with file://, since FA icons *do* show up on the home page. Thanks for the tip about what's relative to what. This is the kind of crazy contradiction problem which implies the universe should disappear in a puff of logic, so I think I'll just stick to the CDN. Thanks everyone! – Nicola Sep 07 '16 at 15:10

0 Answers0