[Resolved] Font awesome icon doesnt align in menu

[takkularapsis]

Hi,

I have added font awesome icon to menu with text, but now i have no idea, why font awesome icon doesnt align in the same row with the text at navigation menu?

[David]

Hi there,

i can’t see a FA icon in your navigation? I assume you want it where the phone number is.

First off that custom link contains an additional empty <a></a> tag that you would want to remove before adding the icon:

Then give the menu item a Custom Class of: custom-menu-phone

Then this CSS – you need to change the FA icon unicode where i have commented:

.main-navigation li.custom-menu-phone a:before {
    content: '\f095'; /* Change Unicode for FA library */
    font-family: FontAwesome;
    font-size: 20px;
    margin-right: 10px;
}

[takkularapsis]

Hi,

Thanks David for your reply. I tryid it, but didnt manage to solve it. Now i have the fa icon there, if you like to check?

[David]

Try adding this:

.main-navigation li.fa-mobile {
    display: flex;
    align-items: center;
    padding-left: 15px;
}

[takkularapsis]

Worked nicely! Thank You!

[David]

Glad to be of help

[Author]

Posts