Divi provides a tremendous amount of capabilities out of the box, but often we need to find ways to extend or improve upon what is provided by default.
In this particular case a client asked to add Yelp along side the other social media share icons showing in their secondary header and footer. By default, Divi offers Facebook, Twitter, Google plus and RSS, which can be toggled on and off in the theme Options. Since Yelp isn’t available in the Theme Options and isn’t part of the standard Divi icon font list I had to seek out an alternative method which opened up a huge range of options… enter Font Awesome.
For those of you who aren’t familiar with Font Awesome, it is a resource library of hundreds (almost a thousand) of free vector icons and logos that can be easily enqueued for use in websites. These icons can then be placed in web pages, posts, inside navigation menus and in this particular case along side the default Divi social media icons in the header and footer.
Sounds pretty cool, right? Let’s get started.
First and foremost you will need a child theme for your site so that the changes we are going to make aren’t overridden by a Divi theme update. I am not going to go into full detail of how to create a child theme in this post, but there are many options out there like Divi Space’s Child Theme Builder or you can refer to this post here: https://aspengrovestudios.com/everything-you-need-to-know-about-using-a-child-theme-with-wordpress-and-divi/
Now that we have a child theme we need to create an “includes” folder via FTP or cPanel and place within it the “social_icons.php” file from the Divi theme. To do this, extract the Divi theme file downloaded from the Elegant Themes Website, locate the “includes” folder and “social_icons.php” file and then upload it to the “includes” folder of your child theme via FTP or cPanel. The final structure will look like this: wp-content > themes > your-child-theme > includes > social_icons.php
Next, let’s enqueue the Font Awesome Free CDN library into our Divi Site. To do this go to Divi >> Theme Options >> Integration and place the below script in the “Add code to the < head > of your blog” section
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
You are now ready to use Font Awesome on your site. That was easy, right? Now head on over to the free font awesome library and locate/click on the icon you are wanting to use… we will come back to this momentarily https://fontawesome.com/icons?d=gallery&m=free
Let’s now navigate back over to the social_icons.php file we uploaded into our child theme earlier and get to work there. As mentioned the client I was working with requested Yelp integration, so I am going to use that as an example here. You can follow this same process using any of the Font Awesome icons. Below you will see the code I used and there are two areas that you will have to pay attention to: the url leading to the desired social media page of your choice and the Font Awesome icon class. Paste this . code right before the closing </ul> tag and then change accordingly:
<li class="et-social-icon"><a href="https://www.yelp.com/"><i class="fab fa-lg fa-yelp"></i></a></li>
Below is a breakdown of the code. You will change the URL and individual icon class according to your needs:
To find the individual icon class, head on over to Font Awesome, search for and click on the desired icon and then copy the unique image class (like fa-yelp) as seen in the image below:
Now that we have completed these steps (and possibly cleared the browser cache) your new social media icon linked to a URL of your choice should now be active as seen in the image below! You can duplicate the code in social_icons.php to set multiple custom icons of your choice.
Let us know how you utilized this tutorial and feel free to leave any questions or comments you may have below: