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

Please share this post:

DWcircle

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

4 Comments

  1. Vit Lastovka on 7th October 2016 at 2:14 pm

    Hi David,
    thank you for this great post. I have a question. I was able to use my own icon (picture) and insert it into menu. Its works like a popup video and it works great. But beside this icon is a link “how it work”. This link should work together with my icon but it doesnt. Can you tell me how I can make icon and text (link) work together. Here is the website: http://projects.vitlastovka.cz/.

    Thanks for help

    Vit

    • David Waumsley on 7th October 2016 at 4:46 pm

      Hi Vit, I’m sure I know an easy way to do it. I’m assuming both the text and the image need to link to # and have the same CSS class or ID assigned to them to get the pop-up working. Is this the UABB Modal module?

      I think if I was doing the same I would assign the modal popup to the text link and add the image as a background. Using the approach in this post https://davidwaumsley.com/icons-to-beaver-builder-theme-menus-two/. It is a bit fiddly with CSS and I not sure about working with the BB menus module on that.

      Is there not a similar Font Icon that could be added before the link text? Mmm just not sure in this. Maybe tell me if I have misunderstood. Or PM me on Facebook if you have a login (but tell me you have as I miss these)

      All the best mate :-)

  2. Matt on 21st February 2018 at 2:33 am

    Hi David:

    Tremendous post! The only thing I might add is that some of the social media brand colors are no longer correct. You can find an up-to-date list of social colors here: https://www.lockedowndesign.com/social-media-colors/

    • David Waumsley on 21st February 2018 at 6:04 am

      Thanks very much Matt. I have updated the post.

Leave a Comment





Do NOT follow this link or you will be banned from the site!