David Waumsley

Adding Icons to Beaver Builder Theme Menus: Part One

The Beaver Builder theme comes with the Font Awesome icon library preloaded.  This allows us to easily display icons on our menu bars and other places without a plugin.  This video shows the quickest and easiest approach that won’t cause problems for those who use screen readers.  In Part Two we’ll be looking at how to do the same using background images and how a CSS version can keep the admin side looking tidy.

**NOTES FROM THE VIDEO

**

Adding icons to text links

social-Icons-example-0

The first thing to check is that you have all your menu options available.  You will find these under Screen Options in the top right if you go to Dashboard > Appearance > Menus.WP-screen-options

For dropdown menus this (below) compliments the “angle-right” icons already used by the Beaver Builder theme when displaying mobile menu drop downs.

<i class="fa fa-angle-down" aria-hidden="true"></i><span class='screen-reader-text'style="position: absolute !important; left:-9999px; top:-9999px;">Facebook</span>

To get the drop down menu icons floating right (See EXTERNAL link above) add this CSS:

/\*Sub Menu- right floating icons\*/ .navbar-nav .sub-menu A I.fa {
  float: right;
  margin-left: 20px;
  font-size: 14px;
}

Note:  The margin-left can be removed as it is there only to give some space if choosing the “Nav Vertical Right” option in Beaver Builder (see the header options image at the end of this post). This is not covered in the video.

Example 1

social-Icons-example1

This is how social icons look when the square icons (ones with backgrounds) are directly placed in a “Custom Link” in the “Navigation Label” area.

<i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i><span class='screen-reader-text'style="position: absolute !important; left:-9999px; top:-9999px;">Facebook</span>

The  fa-lg is added to make the icon 33% larger.  This generally works best but you can remove or add fa-2x (twice as large) fa-3x (three times as large) and up to 5. See examples.

The “screen-reader-text” span provides text for screen readers and styles them to be hidden from sight. This could be achieved with font-size: 0px; but could be revealed by browser that set a minimum font size.

Example 2

social-Icons-example-2

This is how the icon without background looks. Again we are using  fa-lg to increase the size.

<i class="fa fa-facebook fa-lg" aria-hidden="true"></i><span class='screen-reader-text'style="position: absolute !important; left:-9999px; top:-9999px;">Facebook</span>

Example 3

social-Icons-example-3

This is the same as example 2 but with inline colour styling added:

<i class="fa fa-facebook fa-lg" aria-hidden="true" style="color:#3b5998;"></i><span class='screen-reader-text'style="position: absolute !important; left:-9999px; top:-9999px;">Facebook</span>

**For Updated Brand Colours :
**
www.lockedowndesign.com/social-media-colors

Thanks to Matt at www.nobleimage.com

Example 4

social-Icons-example-4

This is the same as Example 2 (although I have removed the fa-lg part that is not needed). It needs the CSS is below:

<i class="fa fa-facebook" aria-hidden="true"></i><span class='screen-reader-text'style="position: absolute !important; left:-9999px; top:-9999px;">Facebook</span>
/\*Same colour with round and hover over \*/
.navbar-nav.menu A I.fa
{
background-color: #58AFCE;
text-align: center;
color: #FFFFFF;
padding: 5px;
font-size: 18px;
/\*+border-radius: 100%;\*/
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-khtml-border-radius: 100%;
border-radius: 100%;
margin-top: -5px;
margin-left: -10px;
width: 28px;
}
.navbar-nav.menu A I.fa:hover
{
opacity: 0.75;
}

social-Icons-example-4b

Another alternative CSS version –  this time with icons individually styled:

/\* icons individually styled \*/ .navbar-nav.menu A I.fa {
  text-align: center;
  color: #ffffff;
  padding: 5px;
  font-size: 18px;
  margin-top: -5px;
  margin-left: -10px;
  width: 30px;
}
.navbar-nav.menu A I.fa:hover {
  opacity: 0.75;
}
/\*Individual Icons\*/ .navbar-nav .menu-item A I.fa.fa-facebook {
  color: #3b5998;
  border: 1px solid #3b5998;
}
.navbar-nav .menu-item A I.fa.fa-twitter {
  color: #00aced;
  border: 1px solid #00aced;
}
.navbar-nav .menu-item A I.fa.fa-youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}

This can be used in any example to make icons feel more responsive on clicking

/\*1
  Pixel
  Jump
  (effect consistent with Beaver Builder Buttons)\*/
  .navbar-nav.menu
  .nav-social
  A
  I.fa:active {
  position: relative;
  top: 1px;
}

Links: If you want some further inspiration for styling social icons this post contains a number of good articles.

Here are the links mentioned in the video regarding Jakob Nielson drop down menu research findings:
Drop-Down Menus: Use Sparingly

Mega Menus Work Well for Site Navigation

…And finally how the social icons will show in different Beaver Builder header options.

Beaver Builder Linked-Icons