Adding Icons to Beaver Builder Theme Menus – Part Two.

28th June 2016

In this video I show an alternative to Part One for adding Font Awesome social Icons to Beaver Builder menus. I also show how to do the same using images instead of font icons.

NOTES FROM THE VIDEO

Adding icons via CSS

Here we are using the :before Pseudo-element (which I mistakenly called a Pseudo-class once here!) to add the icons as new content via CSS.

/*Hides the link text and adds general styles */
.navbar-nav.menu .navicon.menu-item A
{
 color: transparent;
 font-size: 0;
 width: 53px;
}
.navbar-nav.menu .navicon.menu-item A:before
{
 font-family: FontAwesome;
 /*+border-radius: 100%;*/
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 -khtml-border-radius: 100%;
 border-radius: 100%;
 padding: 5px;
 color: #FFFFFF;
 background-color: #58AFCE;
 font-size: 23px;
 display: block;
 width: 42px;
 position: absolute;
 text-align: center;
 font-weight: normal;
 /*This needs adjusting to positive top 6px in the center logo layouts.*/
 top: 7px;
}

This adds the individual social icons from Font Awesome

/*Individual Icons added by CSS*/
.navbar-nav.menu .facebook.menu-item A:before
{
 content: "\f09a";
}
.navbar-nav.menu .twitter.menu-item A:before
{
 content: "\f099";
}
.navbar-nav.menu .youtube.menu-item A:before
{
 content: "\f167";
}

This adds a simple hover-over effect

.navbar-nav.menu .navicon.menu-item A:hover:before
{ background-color: #202020;
}

Not mentioned in the video: you may need to add this to prevent icons slipping out of line on some mobile tablet sizes.

/*Responsive adjustment for vertical alignment at first breakpoint*/
@media (max-width: 990px)
{
 .navbar-nav.menu .navicon.menu-item A:before
 {
 top: -6px;
 }
}

Adding an image icon via CSS

.fl-page-nav .navbar-nav.menu .ta-icon A{
color: transparent;
width: 52px;
background-image: url("/wp-content/uploads/TripAdvisor1.png");
position: relative;
background-repeat: no-repeat;
}

Not mentioned in the video: you may need to add this to prevent icons slipping out of line on some mobile tablet sizes.

/*Responsive adjustment for vertical alignment at first breakpoint*/
@media (max-width: 990px)
{
.navbar-nav.menu .ta-icon A
{
top: -6px;
}
}
Posted in ,

Please share this post:

Share on PinterestShare on LinkedIn

DWcircle

David Waumsley

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

2 Comments

  1. iain macgillivray iain macgillivray on 9th August 2016 at 12:16 pm

    Hi David,

    great stuff, again…

    which css editor are you using in the video..?

    cheers,

    Iain

    Reply
    • David Waumsley David Waumsley on 9th August 2016 at 12:51 pm

      Hi Iain,

      Nice to see you here too. The editor is called Stylizer ( http://www.skybound.ca/) I have been using it since 2008. I’ve tried all new ones like CSS Hero, Yellow Pencil and Microthemer, but just haven’t got on with them. I find them restrictive and I feel you end up learning an interface rather than CSS.

      That could be me stuck in my ways, but I found able to switch to and from manual coding with it.

      There is a 30 day trial (I think) where you can get it without signing up, They don’t seem to have an affiliate scheme so don’t get promoted much.

      Reply

Leave a Reply Cancel Reply