Add a custom social media icon to the Beaver Builder Theme

Different countries and businesses promote themselves on different social media platforms.


Because different businesses have different target audiences and different social media platforms attract different types of people.

The Beaver Builder core developers understand this and, as such, have included in their Beaver Builder Theme an easy way for us to add custom social media icons to the list of icons output by the theme.

This tutorial will show you the exact steps you need to follow to add your own custom social media icon to the Beaver Builder Theme and we’ll be adding a Houzz icon as an example.

Step 1: Add a new setting to the Customizer for the new social media icon

The first step is to register a new field in the Customizer.

To do this, edit the functions.php file in your theme and paste in the below php code, replacing the word houzz with the name of your social media icon that you’d like to use.

Now, when you go to your WordPress Dashboard > Appearance > Customize > Settings > Social Links there will be a new field to add your URL for this new social media channel, as per below, where you can now see a field for Houzz in our example.


But, even if you add a URL in here to this new field, it will not update in your list of social media icons on the front end of our website, as per below.

We’ve added a URL for Houzz but the icon is not showing to the right on the front end of our website.


To put it simply, this new field and the value in it (i.e. the URL to our houzz page) is being saved into the database, but now we need to register it into the list of Social Media Icons that the Beaver Builder Theme outputs on the front end.

Step 2: Add the new custom social media icon to the list of social media icons that the theme outputs on the front end of the website

Next, paste the first php code snippet below into your themes functions.php file and replace the word houzz with the name of your new custom social media icon.

You’ll notice in the PHP below that we’re using the filter fl_social_icons that’s included in the Beaver Builder Theme to allow us to do exactly what we’re trying to achieve in this tutorial (the official documentation on this filter is here).

TIP! The order in which you list the icons in the above PHP snippet is the order they are output in the list of social media icons on the front end of your website. So, if you want your new social media icon to come first in the list of icons, you should add it to the top of the list. For instance, if we want our Houzz logo to appear first in the list, we’d add Houzz up the top before facebook.

Next, add the above CSS code into your theme’s style.css file (or wherever else you add your CSS code), and note the following:

  1. Change the font size: You may need to change the font-size:17px declaration to whatever font size is appropriate for your design.
  2. You need to update the unicode for your icon. \f27c is the unicode number for this Houzz icon in Font Awesome and you will need to change this depending on the icon you are adding. For example, you can find all Font Awesome icons by clicking here. To find the unicode for the icon you’re wanting to use, click on an icon and you’ll be taken to a page that describes just that icon and the unicode is on that page. For example, if we were wanting to add a Snapchat icon, we’d go to this link, search for Snapchat, then click on it and land on the below page, where we can see the unicode in the red circle pictured below.
    So, we’d update the above CSS and replace \f27c with \f2ac
  3. Update the color: In Appearance > Customize > Settings > Social Links you can set whether you want the Social Icons in your theme to monochrome (i.e. all the same color) OR Branded (i.e. the colors of each icon match the social media channels own branding). This setting is shown below.
    If you select Branded, you will need to update the above CSS so that the colors of the icon match the branding of the social media channel.

Comment below

Show us where you’ve added a new custom social media icon by commenting below!

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

3 thoughts on “Add a custom social media icon to the Beaver Builder Theme”

  1. So just fooling around and getting to know Beaver Builder, followed your great instructions to add Spotify to our list of Socials, but, it shows up correctly in the top tab but not with the branded color, and the icon does not show up in the footer, the link is there if you hover over the gap but no icon. Any ideas?

    Thanks! 🙂

    Dave Beebe
    The Birchmere

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top