[Resolved] Menu Icons Don't Carry Over From Homepage

[Mia]

Hi David, thanks for getting back. So I pretty much have just used the “Custom Links” option in the menu setting section, and adding the icon HTML (from here: https://fontawesome.com/icons?from=io) in the Navigation Label field, as the instructions say to do here: https://docs.generatepress.com/article/adding-icons-to-menu-items/ I don’t have the Better Font Awesome Plugin, so I’m not sure how it could be grabbing from there? I also have all of my plugins disabled aside from GP Premium and BeaverBuilder. Is it best to change the menus through BeaverBuilder or should I just do as I am and to menu settings, Custom Link, and add from there?

Thanks!

[David]

Hi Mia,

You custom menu icons are FontAwesome 5. It works on the home page because of the BeaverBuilder section containing to the two social media icons. Because of them being there BB calls for FontAwesome 5.

If you were to add that section to other pages then the menu icons should work. So this would be the easiest route to fix the problem.

If you’re not going to use BeaverBuilder icons elsewhere then we would need to enqueue the FA5 library on other pages.

Let me know

[Mia]

Hi David, for some reason I’m not able to actually change the content of any of my menus with BB, I’m able to change the settings of those menus (alignments, etc) but not the content itself. Any changes I’ve made to the menu have been under Appearance > Menus > etc. This may very well be a case of user error here, since this is my first time using BB. Now I can change elements of the Header when I’m in Customize mode, but I haven’t done that thus far. Is this the way to achieve that?

Pretty much I just want a Facebook, LinkedIn, and Home icon in my menus, I’m not particularly attached to Font Awesome I just sort of assumed that was the easiest/best icon type to use. I’m open to any suggestions really!

[David]

Hi Mia,

apologies for the run and around, i took some advice and it seems there is a bug related to BeaverBuilder and FontAwesome5. The fix is to use FA 4 instead. This document shows how to do this:

https://kb.wpbeaverbuilder.com/article/645-font-awesome-5-icons

And you can use FA icons listed here:

https://fontawesome.com/v4.7.0/

[Mia]

I see, so I can’t have both 4 and 5 selected at the same time. It looks like I have all of the 5 options selected (no 4) and am using FA5 icons in the menus currently. The menu shows up on all pages except Our Story for some reason, so I’m guessing it’s something specific to that page. Is this what you would recommend (all the 5s selected and using FA5) or do you think I’ll have better luck with 4? Thank you so much this is really great!

[David]

The advise i was given from a BB user was to disable FA5 in BB and enable FA4. Then make sure you use FA 4.7 icons for you custom menu markup as per the line above.

[Mia]

It’s interesting, when I enable 4 and use the FA 4.7 icon html I’m back to squares or the icons not showing at all, only the home icon seems to work, the social ones don’t show up now?

[David]

Looking at the site those missing icons are still calling the FA 5 CSS – the Icons lower down the page are also FA 5 and display correctly which says that FA 5 is still enabled – can you confirm?

[Mia]

Here are the tags that I used for the social icons:
<i class=”fa fa-facebook” aria-hidden=”true”></i>
<i class=”fa fa-linkedin” aria-hidden=”true”></i>

I searched for them here (https://fontawesome.com/v4.7.0/icons/) and copied directly over.

Sorry I feel like this should be simple but it just doesn’t want to work for me!

[David]

Did you disable the FA 5 icons in Beaver Builder and just enable the FA 4 icons?

[Mia]

Yep! So currently I only have one option selected, “Font Awesome 4” under BB icon settings

[Mia]

Also strange – when I’m in the BeaverBuilder editor I can see the icons just fine but when I exit BB mode they disappear?

[Tom]

I’m still seeing Font Awesome 5 on your site?

Can you try adding this function as well?: https://docs.generatepress.com/article/font-awesome/#font-awesome-5

Let me know 🙂

[Mia]

Hi Tom! Apologies, I went ahead and set it up with FA5 again since those ones worked at least *some* of the time vs not at all with FA4 (we’re getting close to launch so I wanted to have something there for the time being!)

Two questions for this function as I am very (very!) new to this, first: where exactly do I put this? Second: will this work with FA5, so I can leave all settings as is and add this function, or should I toggle back to FA4?

Thank you!

[Leo]

Then snippet can be added using one of these methods:
https://docs.generatepress.com/article/adding-php/

Code Snippets is the easiest if you aren’t using a child theme.

FA5 should work after that 🙂

[Author]

Posts