Site logo

Archived topic

Font awesome icon doesnt align in menu

5 replies · Started by takkularapsis on March 3, 2019

Viewing posts 1–6 of 6

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?

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;
}

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?

Try adding this:

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

Worked nicely! Thank You!

Glad to be of help

This archived topic is closed to new replies.