Icons not showing up in Firefox

For anyone else having this problem I fixed it by not using a plugin at all. I went to the font awesome site and downloaded the latest zip file, extracted and placed the entire thing in my child-theme folder, and imported the style in my style.css file by using: `@import url(“../function-child/font-awesome-4.0.3/css/font-awesome.css”);
`
After doing that you can use the i class snippets within your site.

Can you post a link? I haven’t heard of this and the YouTube icons (and all others we’ve tried) have never been an issue on any browser.

Here is a link to my test website.
I am using the “fa-cutlery” and the “fa-circle” on the main menu but on Firefox the icons are not displayed.

Thanks manouallou, I’m not able to post a link because I’m still in development on my localhost. From Googling it seems to be a CDN issue that sporadically affects FireFox. Like I said, I circumvented the issue by loading the fonts locally; I know that is not as fast as using the CDN but I prefer the reliability. If there was an option for the plugin to load the fonts locally that would be nice.

Hey mikehoude,
I tried to load them locally too but I failed. Can you please elaborate on how you did it? The “@import url(“../function-child/..” you posted doesn’t seem to apply to my theme. Too bad my CSS knowledge is that limited.
Anyhow, I prefer to load them locally than have issues with Firefox or whatever browser. Let’s see if the developer of the plugin suggests something else.
Thanks

Hi all. @manouallou – I can see the fonts on your site using Firefox on both a mac and PC.

@mikehoude – when loading any fonts via a CDN, you need to add some directives to your .htaccess to allow Firefox/mozilla to access the webfonts.

Check out this link: https://support.maxcdn.com/tutorials/htaccess-examples/

Hi New Nine. Thank you for answering.
Strange, but I can’t see the “fa-cutlery” and the “fa-circle” in both my PC and my Android’s Firefox. What could be the problem? For the PC I might have a conflicting plugin because I have my Firefox loaded with some but my Android device has no plugins or something that could cause this. Very strange.

Thanks to the Plugin developer for your quick response! I am marking this as resolved as that link provided is very helpful.

manouallou – I went to https://fortawesome.github.io/Font-Awesome/ and clicked the Download link there. I extracted that zip file right into my downloads folder as well. I then moved that folder (font-awesome-4.0.3) and all of it’s contents into the active them folder – for me I’m using a child theme of Function so I put it in the function-child folder. Then to reference that font folder you have to make your regular style.css import the font-awesome css; if your font-awesome-4.0.3 folder is in the same folder as your style.css (it should be), then open up style.css and paste
@import url("../function-child/font-awesome-4.0.3/css/font-awesome.css");
at the top of the document. What that does is load the css from font-awesome as if it’s part of your site’s style.css file.

If that doesn’t work, it may be because when I view source on your site using FF on Win7 at line 86 I see that you are pulling a font-awesome css from somewhere, so depending on which comes last will get the precedence. It’s from this plugin so disabling the plugin will remove the css link but I don’t know if it will leave the shortcodes/i classes.

@mikehoude
Thank you very much for the detailed walk-through! I will try it and post back.
Please let us leave this post open for the developer to answer back on my previous post.
Cheers & many thanks!

I’m having a similar issues with my icons not showing up in firefox. It’s just happening on the URL I have pointing to my website. I tried using the full path to the font file but I seem to be missing something. Please HELP!

URL with issue in FF: https://cwiinteriordesign.com/
URL the site is hosted on: https://www.cwidfw.com/

All seems to work great in Safari.

jenrocks_okc – you’re having a common problem with loading fonts on Firefox. This is the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.cwidfw.com/wp-content/themes/thrill/font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.1.0. This can be fixed by moving the resource to the same domain or enabling CORS.

It’s because your site is trying to load the fonts from https://www.cwidfw.com on cwiinteriordesign.com. If you visit https://www.cwidfw.com (which is a mirror of the other site), you’ll see that it’s working.

You either have to update your server configuration OR (the easier way) choose to load the font from the CDN (see the options panel).

I’m a bit of a novice here…

” choose to load the font from the CDN (see the options panel) “

not sure what this is…

Two notes are important preventing a lot of disappointments:

1. WordPress framework and the Plugins upgrade frequently: Then many (custom) changes made inside header pages and css files get erased (read: reset) here-and-there. It’s impossible to keep track of all the changes/customizations that webmasters make to their websites…
It’s best to provide coding solutions that fits into the CUSTOM.CSS file, as the custom-css file remains unchanged at all times.
So for customizations and problem-solving, the custom-css file is the way to go.

2.
A note regarding giving external links to other websites documentations:
Websites links get changed/updated regularly as they are dynamic and in constant movement, it is therefore useless to include external links at all.

Just include the A&Q TOPIC POINT copied from the website inside your posts/messages.
This works a LOT EASIER, especially for the Novice people (an estimated 70& of website designers don’t know PHP, and that’s just fine, every person’s got his/her own strengths.)

Thanks,
Hav’a great day ! ^___^