Font Awesome not displaying

Looking at the source of your web page, it looks like the font-awesome.min.css stylesheet is actually getting loaded ok. Could you please supply a URL of your site where you’re trying to actually display the icon fonts, as I couldn’t find a page that’s using them.

Also, try changing the above lines to the following

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This will only resolve issues with fonts that aren’t displaying due to using a CDN, which causes problems for FF and IE as they have a ‘cross-domain’ issue.

Hi Anthony

https://sundistortion.com/

The Parent Menu item is now showing a font-awesome character, which is just rendering as a box

Thanks

Can you confirm if you/your host is actually using a CDN?
Did you change the lines in the .htaccess files as I mentioned?
Also make sure you clear your CDN’s cache.

Did some research & my host isn’t using a CDN.
I tried replacing the .htaccess files as mentioned with no change.

Any more ideas?

Can you please make sure that the fontawesome-webfont.woff file is in the themes/quark/fonts folder as it doesn’t appear to be loading. The browser is returning a 404 error on that file. I’d suggest copying up the whole fonts folder to your server again.

Yes, all fonts are in the correct folder.

Did some more research & it seems it’s a hosting issue with GoDaddy.
https://stackoverflow.com/questions/7209759/problems-using-font-face-for-site-hosted-on-godaddy

https://css-tricks.com/forums/topic/please-help-fontface-not-working-with-godaddy/

I’ve tried moving the font files into the css folder & changing the corresponding file paths to no avail. I’ve also double checked folder permissions are OK.

At wits end with this.
Moral of the story, don’t use GoDaddy.

Something else for you to try…

Try changing the font path for all the font files in css/font-awesome-min.css to a fully qualified path.

ie. change
../fonts/fontawesome-webfont.eot?v=3.2.1
to
https://sundistortion.com/wp-content/themes/quark/fonts/fontawesome-webfont.eot?v=3.2.1

Do this for each of the font files that it references (.eot/.woff/.ttf/.svg)

Tried changing the file path as requested but it didn’t work.

I did try clipping the “?v=3.2.1” from the file paths & the icons are up & running (although not in Firefox)

How will clipping the version number effect the fonts?

Thanks for your time & persistence.

To find out more about using font-face, I’d suggest reading through this article by Paul Irish – https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Basically, the parameters on the URL string are for cross browser compatability. I wouldn’t recommend removing them.

If you’ve tried all the recommended solutions in those articles that talk about GoDaddy issues, as well as all the suggestions that I’ve mentioned above, and you’re still having issues, then the only other thing I can suggest is that you move webhosts.