[Resolved] Menu and Font Awesome Icons

[Richard]

Hello, today I noticed that the menu items I added with Font Awesome Icons display weirdly, like smaller menu items on the main menu, however when I change those menu items from the icon to generic text, the menu item is normal again. I’m not exactly sure how to explain it, but it’s currently live here > My Website

[David]

Hi there,

thats odd, they should not behave in that way.

Can you go to Customizer > General and:

1. Set the Icon Type to SVG
2. Set the Structure to Flexbox.

[Richard]

That fixed it =)

[Richard]

Derp! the buttons centered but they’re still small (I have to basically mouse over the icon)

[David]

Very odd – i am not sure what the FA Icons are doing but its not respecting the menus line-height.
Try adding this CSS to fix that:

.main-navigation .main-nav ul li a i,
.main-navigation .gp-icon svg {
    line-height: 60px;
}
.main-navigation .gp-icon svg {
    height: 60px;
}

[Richard]

That has fixed the issue, thanks very muchly =)

[David]

Glad to hear that

[Author]

Posts