Tagged: facebook icon, fontawesome, glyphicon, menu
This topic contains 6 replies, has 2 voices, and was last updated by Aigars 4 years ago.
- AuthorPosts
- April 22, 2014 at 3:13 am #6063
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!
April 22, 2014 at 5:59 am #6065You 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.
April 22, 2014 at 8:22 am #6071Excellent, 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
April 22, 2014 at 8:27 am #6072also…website is http://www.physiowarrior.com (if you need to see)
April 22, 2014 at 12:17 pm #6074I 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'; }
April 22, 2014 at 1:23 pm #6076Cheers! 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!
April 22, 2014 at 1:46 pm #6077I 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.
- This reply was modified 4 years ago by
- AuthorPosts
The topic ‘facebook icon in mneu’ is closed to new replies.