David Waumsley

Adding Icons to Beaver Builder Theme Menus: Part Two.

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