Font Awesome only partially works

Font awesome only works for some icons that I have to figure out by trial and error. Otherwise I just get a square.

I tried installing the Font Awesome plugin but nothing works.

Any advice for me? My site is www.financialadditions.com

Hello there,

Which icon class names did you try? Probably it is unavailable in the version included in the theme. Probably you should call the latest version of Font Awesome script separately by following the instructions as I posted in this thread:

Let me know how it goes for you.

Regards,
Kharis

This worked - thank you!

Uh oh - it looks like it messed up the menu button on mobile. Any recommendations?

Hey Weston,

I had the same problem as you, so I did some digging. Here’s what I found to work for me:

  • Go to Appearance -> Theme Editor
  • On the right, if it doesn’t say “Sydney Child,” then click the dropdown, click “Sydney Child” and then click select. (if you don’t have a child theme, you should make one. I use the plugin “Child Theme Configurator”)
  • Click on “style.css” on the right. This will bring up that file for you to edit.
  • You may see some text that looks something like this: /* some text here */. Any text within the /* */ is considered a comment by the computer. I recommend you make a comment block of your own anytime you make changes so you can remember what you did. You can even include a link to this forum to help you remember what you did.
  • So below your comment block, add the following code:

.btn-menu {
font-family: “Font Awesome\ 5 Free”;
font-weight: bold;
}

I guess Font Awesome changed some things with their version 5 to require this change when implementing their Unicode.

In case you weren’t aware, you can implement F.A. the <i> tag or using Unicode. The Sydney theme uses Unicode for its mobile menu icon. Here’s the snippet from ‘style.css’…The “\f0c9” is the Unicode that points to the FA menu icon.

.btn-menu:before{
content: “\f0c9”;
}

I was able to figure this out thanks to Tom Warner’s comment on this Stack Overflow thread: https://stackoverflow.com/questions/17254339/font-awesome-unicode

I hope this helps! If you have any questions, reply here and hopefully, I’ll get back to you!

FYI Font Awesome changed a few other things. Here is there website on Upgrading from Version 4. You might want to go through it to make sure you’re all good!

For me, I know one extra thing I had to change was changing “fa” to “fab” on all of my “brand” icons. For me, this was all of my social media links.

For example, instead of:

<i class="fa fa-facebook-f"></i>

It should be:

<i class="fab fa-facebook-f"></i>

Cheers!

Thank you so much for the helpful info here! Unfortunately I don’t have a child theme and when adding the child theme plugin I didn’t see/wasn’t able to follow the next steps you mentioned.

Unfortunately the steps you have are a bit more advanced. I work on the front end of the site and lose track really quickly when it comes to editing the code or managing a child theme.

Is there a plug in I could use to fix the mobile menu? FA seems to work across the site on desktop its just the menu icons for mobile only that is broken.