facebook icon in mneu

[charitywarriorMember]

Hi,

Is there a way to add a facebook icon in the menu? at the moment i just have the menu name ‘f’…but an icon would look much nicer!

I’ve tried using font awesome icons fa-facebook, but no luck…don’t think there is a glyphicon either?

Also is there a way to remove the social icon in the footer, but keep it in the sidebar widget?

Thanks!

[AigarsKeymaster]

You can try to add it like this:

#menu-item-1772 a:before {
    font-family: fontawesome;
    content: '\f09a';
    margin-right: 10px;
}

This targets specific menu item and in you case the ID will be difference, so make sure you use Chrome or Firefox dev tools to inspect particular element and use that ID to replace one I provided above.

Alternatively you can choose between other FontAwesome icons.

Code to hide social media icons from footer while keeping them in widget are:

#footer-area .social-icons {
    display: none;
}

Add both code snippets to Theme Options – Other – Custom CSS. Don’t forget to add specific ID to first code snipper otherwise it is not going to do anything.

[charitywarriorMember]

Excellent, thanks for that. I was able to remove the ‘facebook icon’ from the footer.

I’ve looked up heaps of help guides on trying to add a ‘font awesome icon’…but with no luck. Is there a simple way to add a ‘facebook’ font awesome icon to the title attribute in the menu? I’ve worked out how to do it with glyphicons, but not yet with font awesome icons

[charitywarriorMember]

also…website is http://www.physiowarrior.com (if you need to see)

[AigarsKeymaster]

I already gave you an example above.

Now, when I see your website I can give you even more specific code. Add this to Theme Options – Other – Custom CSS

#menu-item-123 a:before {
    font-family: fontawesome;
    content: '\f09a';
}

Or you can choose this icon since there are two different Facebook icons in font awesome icon set.

#menu-item-123 a:before {
    font-family: fontawesome;
    content: '\f082';
}

[charitywarriorMember]

Cheers! The icon works great….unfortunately I can’t leave the nav menu title as ‘blank’ to just show a facebook icon, so i still have to write something there, obviously looks funny if I put another ‘f’, for now I’ve left it as *f*acebook. If there’s a way around that, please let me know. Otherwise thanks for the great support!

[AigarsKeymaster]

I will think about how this can be done but right now I have no idea how it could be done better. Maybe you can try to add facebook link directly inside to nav menu which is located in header.php file.

You can add this directly inside menu div right after menu php code is executed.

<li class="facebook-menu"><a href="http://facebook.com"><i class="fa fa-facebook"></i></a></li>

If you are having problems with this please com back and i will try to help you from there. I could give more guidelines but I am currently not art my main development machine, so I just improvise 🙂

• This reply was modified 4 years ago by  Aigars.

[Author]

Posts