DIVI | FONT AWESOME “SOCIAL” ICON
INGENUITY REQUIRED
I’m working on a redesign for a client that needs an email icon (envelope) in their footer at the end of their social icons as well as in the header at the end of the social icons there too. Divi – https://www.elegantthemes.com/gallery/divi/ – is a WordPress theme by Elegant Themes that is quite powerful and ready for whatever design you can throw at it. And while there was great thought put into the number of included social icons, the developer chose to only allow social icons to be included in the social areas – go figure.
They also gave us instructions on how to add ones that aren’t part of the theme’s customization admin screens. This involves copying a file from the parent theme to the child theme (a best practice); making appropriate modifications to this file and then adding some CSS to the child theme’s styles.css file.
The following set of instructions are a combination of several articles I found and hopefully this will simplify the effort for those wanting to do this without reading multiple articles.
Combine that with the theme’s ability to add Font Awesome as part of a native inclusion of include files in the head part of the site and you’ve got the components to add whatever icon you might need. Here’s what’s needed to get this done in detail.
This article assumes you have setup Divi with a child theme. If you haven’t done this, you will run the risk of any custom code being over-written when an update is applied to the parent theme. I’ve added the simple child theme to the end of this article – feel free to use it wherever you want as it only sets up the structure for any customizations, but doesn’t contain any.
ADD FONT AWESOME TO DIVI THEME
Using Divi’s integration tab in the Divi Theme Options area, paste the following into the HEAD section:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
NOTE: Update the version number to the latest version number to get the most complete set of icons.
PREPARE CHILD THEME
- Prepare some local folders to keep things organized:
Divi Customizations/
Divi Customizations/parent theme files/
Divi Customizations/parent theme files/includes/
Divi Customizations/child theme files/
Divi Customizations/child theme files/includes/ - Connect to your site via FTP and download the following files to the folders you just created
- social_icons.php (wp-content/themes/divi/includes) -> child theme files/includes/
- social_icons.php (wp-content/themes/divi/includes) -> parent theme files/includes/ (this will be a backup in case there’s a problem)
- styles.css (wp-content/themes/divi-child/) -> child theme files
- Edit the child theme version of social_icons.php
Add to the end of social_icons.php
<li class="et-social-icon et-social-email">
<a href="/contact" class="icon">
<i class="fa fa-envelope"></i>
</a>
</li>- The first line, you need to designate a unique class name. In my case, it is “et-social-email” and you can make it anything as long as you can be sure it’s unique.
- The second line is the URL you want the user to go to when the icon is clicked – relative or full URL is acceptable
- The third line is the normal Font Awesome structure for displaying a font
- Open the child theme files styles.css file and add the following:
Add to child theme's styles.css
.et-social-email {
font-size: 28px;
}- Line 1 matches the style used in line 1 above
- Line 2 sets the size of the icon – 28 px should match the size of the native social icons in the footer.
UPLOAD NEW FILES
Remember, these files should only be added to the CHILD THEME on the server
- Upload the entire includes folder from the child theme files folder to the existing Divi-child folder (be sure the social_icons.php file makes it to the server too)
- Upload the styles.css to the Divi-child folder
CUSTOMIZATIONS
This process can be customized in three ways:
- ICON | Use the documentation at fontawesome.io to find the right icon for your needs and use that in the PHP file
- PLACEMENT | If you look at the PHP file, you’ll see that the order of the list items (<li>) is reflected as the order on the site. If you want your icon first, then add it right after the <ul> tag. If you want it after the Facebook icon, insert it after the block that has the Facebook code in it.
- SIZE | If you customize the size of the social icons via CSS, be sure to make corresponding changes to your custom style.
CONCLUSION
Hopefully, when you refresh the site, you’ll see the new icon in the footer and since it’s technically a font, the same hover color transitions will apply to the new icon.
RESULT
RESOURCES
- Font Awesome Icons | http://fontawesome.io/icons/
- Article on How to Add More Social Media Icons to Divi
- My Divi Child Theme (just upload and install this zip file)