How to put social icons in header?

BB Theme
1

Hello,
I want to include social icons in the header of this site, which uses vertical left nav layout.
http://ari.myparnasa.com/
I would love the icons to appear right under the contact link.

I tried the solution offered in this post, but no icon appears
http://forum.wpbeaverbuilder.com/support/q/how-to-put-a-mail-icon-in-menu/
any suggestions?
Thanks

2

Hey Naomi,

Nice looking site that you have there! :slight_smile:

Re the issue, it seems the double quotes got messed up when you copied the code from that thread. Check the screenshot below for reference.

View post on imgur.com

Can you delete it, then copy and paste the same code again? If it still doesn’t work(browser issues), try typing the code manually. :slight_smile: <i class="fa fa-envelope-o"></i>

Ben

3

that worked great.
check it now.
i don’t suppose there is any way i could get those icons on a single line?

4

Hey Naomi,

You’ll need to add a custom class for each menu item. Check the link below for more info.
http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

You’ll want to place different classes for each, e.g., fl-menu-youtube-icon and fl-menu-fb-icon, then use the CSS snippet below.

@media (min-width: 992px) {
  #menu-main-menu .fl-menu-fb-icon, #menu-main-menu  .fl-menu-youtube-icon {
    width: 50%;
    float: left;
  }
  #menu-main-menu .fl-menu-fb-icon a {
    text-align: left;
  }
  #menu-main-menu .fl-menu-youtube-icon a {
    text-align: right;
  }
}

Ben

5

that worked.
you guys ROCK!!!

6

Awesome! And no worries at all, Naomi! :slight_smile:

Enjoy BB!

Ben