[Support request] Vertically align Font Awesome Icons in Menu

[drumelie]

I would like to vertically align the Font Awesome icons showing on the secondary menu at the top (Facebook and phone icons). I changed their size but now they are slightly offset and appearing slightly higher than the other menu items. Can anyone help me fix this?

[Leo]

Hi there,

Instead of your current CSS to change the size, try this:

.secondary-navigation .main-nav ul li.ctm-menu-icon-lone a {
    font-size: 20px;
}

[drumelie]

Thank you, that worked great for the Facebook icon. But I am still having issues with the phone icon, which is part of the ‘a’ tag that also includes the phone number. I want just the icon to be larger, not the phone number. Is there a way to do this without the icon shifting up (off center)? Do I have to separate them into separate menu items in order to be able to target the ‘a’ tag instead of the ‘i’ tag with my CSS?

[Leo]

Hmm it is trickier if you only want to make the icon bigger.

Might have to just add some top padding to the icon itself.

Are you wanting the whole thing to be a link?

[drumelie]

No, just static text. I can put the icon as a separate item. It won’t hurt anything. Thank you for your help.

But I had another question about Font Awesome. The codes that are referenced on their site starting with ‘fas’ do not work. If I change it to ‘fa’ it works. Is this because GP does not support FA 5 yet?

[Leo]

Yup exactly 🙂 We are in the process of upgrading to FA5 🙂

It hasn’t been easy but we will get it done!

[Author]

Posts