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

Home Forums Support Menu Icons Don't Carry Over From Homepage

This topic contains 37 replies, has 4 voices, and was last updated by  Tom 4 months ago.

Viewing 15 posts - 16 through 30 (of 38 total)
  • Author
    Posts
  • #616269

    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!

    #616471

    David Customer Support

    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

    #616508

    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!

    #616638

    David Customer Support

    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/

    #617398

    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!

    #617402

    David Customer Support

    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.

    #617497

    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?

    #617502

    David Customer Support

    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?

    #617507

    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!

    #617509

    David Customer Support

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

    #617512

    Mia

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

    #617515

    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?

    #617707

    Tom Lead Developer

    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 🙂

    #619494

    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!

    #619686

    Leo Customer Support

    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 🙂

Viewing 15 posts - 16 through 30 (of 38 total)

You must be logged in to reply to this topic.