I come to love the Elegant Themes by using DIVI. I started loving EXTRA more for certain projects but noticed some things were different in the way it was coded, like how to manually add more social media icons. There’s instructions on how to manually add social icon to DIVI, but not for EXTRA. Not sure if there’s a better way, but I was able to use font awesome and it turned out great and I wanted to share to save you the hassel of reinventing the wheel. This is pretty techy and I hope my instructions help you achieve your goal. Feel free to comment if you have questions and I’ll be happy to answer if I can. In the instructions below when I reference the header.php, footer.php and style.css; they are in a child theme. This is important. If you don’t have a child theme, you can easily install one with a child theme plugin. I use the Child Theme Configurator plugin. It ‘s easy-peasy. The INSTRUCTIONS use LinkedIn as an example, but you can add any social icon that’s not already in EXTRA.
INSTRUCTIONS:
- I installed font awesome using the CSS method. It’s important to copy the entire zip to your server folder.
- In the header.php <head> tag, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> - Click here and scroll down a bit and in the ‘Search icons’ text field type the name of the social icon you want. In this example, I typed linkedin.
- In the search results, I picked the first linkedin, not the linkedin-square (it might of worked, never tested) and it brought me to this page: http://fontawesome.io/icon/linkedin/
- The important thing here is the class which is “fa fa-linkedin”. Make note of that. You’ll see how I used it in step 7 and 10.
- Now we’re going to modify the header.php file which will show the icon in the secondary header, top right. Step 9 shows how to add to footer. Find this piece of code:
<li class=”et-extra-social-icon <?php echo $social_icon; ?>”><li class=”et-extra-social-icon <?php echo $social_icon; ?>”> <a href=”<?php echo esc_url( $social_icon_url ); ?>” class=”et-extra-icon et-extra-icon-background-hover et-extra-icon-<?php echo $social_icon; ?>”></a> </li> <?php } ?> <?php } ?> </ul>
- Right after the above code, paste your linkedin code (don’t forget to change url to your url) and save.
<ul><li><a class=”linkedin-icon” href=”https://www.linkedin.com/company/ilocaleverywhere”><i class=”fa fa-linkedin fa-lg”></i></a></li></ul>
- Now go to your style.css file and add this piece of code, save and that’s it! You should be able to see your social icon in secondary header. Of course, change the background color to your secondary header color:
/*SECONDARY MENU BAR */
.fa {color: #fff; background: #FA454B; padding: 8px; margin-left: 9px;}
.fa:hover {background: #0077B5 !important;}
- If you want to add to footer, then in footer.php find this piece of code.
<li class=”et-extra-social-icon <?php echo $social_icon; ?>”><li class=”et-extra-social-icon <?php echo $social_icon; ?>”> <a href=”<?php echo esc_url( $social_icon_url ); ?>” class=”et-extra-icon et-extra-icon-background-none et-extra-icon-<?php echo $social_icon; ?>”></a> </li> <?php } ?> <?php } ?> </ul>
- Right after the above code, paste your linkedin code (don’t forget to change url to your url) and save.
<ul><li><a class=”linkedin-icon” href=”https://www.linkedin.com/company/ilocaleverywhere”><i class=”fa fa-linkedin fa-lg”></i></a></li></ul>
- Now go to your style.css file and add this piece of code, save and that’s it! You should be able to see your social icon in the footer. Of course, change the background color to your footer color:
/* FOOTER */
#footer-nav .fa {background: #1E2339 !important;}
Well, it was fun to figure this out and glad I’m able to share to help others. Enjoy!!