[awecesarParticipant]

Hey, on my site
http://timogede.com
my social icons in the footer and the arrow icon (both from font-awesome) don’t show the right icon in Firefox.
http://prntscr.com/7kygor
http://prntscr.com/7kyh3a
In other browsers like Chrome they show up correctly.
Any idea what to do to fix that?
Thanks!

[RadModerator]

Hi there,

Thanks for writing in.

I checked it at Mac’s and windows’ firefox and icons are working okay.

Perhaps, it’s cache issue at your end. Please do clear your browser’s cache.

Thanks!

[awecesarParticipant]

Tried it but no sucess.
There are a lot of people reporting about font awesome problems only on firefox but I can’t find any good solutions 🙁

[Rue NelModerator]

Hello There,

You added font awesome in your child theme’s style.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

And this means that you need to upload font-awesome fonts in /wp-content/themes/fonts/. If you have place the fonts in /wp-content/themes/x-child-renew/fonts/, then your code should be like this:

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Please let us know how it goes.

[awecesarParticipant]

Thanks for the answer, it works. I have a question just for undestanding purposes. Why is this working now?

[Paul RModerator]

Hi,

The file path was incorrect in your code.

eg.

../fonts/fontawesome-webfont.eot?v=4.3.0

That points to http://timogede.com/wp-content/themes/fonts/fontawesome-webfont.eot but your font resides in
wp-content/themes/x-child-renew/fonts/fontawesome-webfont.eot

So to fix, I change

../fonts/fontawesome-webfont.eot?v=4.3.0

to this

fonts/fontawesome-webfont.eot

Hope that makes sense.

[awecesarParticipant]

I understand that. But why did it work in every browser except for Firefox?

[RupokMember]

Hi there,

Each browser read and render elements differently specially Firefox and Webkit browsers (Chrome, Safari etc) are different than each other. So if anything works on Chrome, you will get it work on Safari too but it might not work on Firefox as it’s on different rendering engine.

Hope this helps.

Cheers!

[Author]

Posts