Add social icons to header and footer
If you find this tweak helpful:
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
Divi gives you the option to add social icons to the header and footer of your website through the Appearance->Customize->Theme Settings options panel. You can then add/remove individual icons through the epanel. But the only options are for Facebook, Twitter, Google+ and RSS. If you want to add LinkedIn or other icons, you’ll have to add the code yourself which is pretty easy.
Create a folder in your child theme called “includes”
Copy the social_icons.php file from the /Divi/includes/ folder to the includes folder you just created in your child theme
The default icons included in Divi end with this line of code in the social_icons.php file:
<?php endif; ?>
Paste the following code directly under any of these lines, depending on where you want the new icon placed:
<li class="et-social-icon et-social-linkedin">
<a href="#" class="icon">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
Replace the # sign in the code above with the correct URL. The example above inserts a LinkedIn icon. Divi has several social icons available. Just replace the “linkedin” in the text above with any other social icon like: youtube, skype, etc. The most important line in the code above is this one:
<li class=”et-social-icon et-social-linkedin”>
This line controls which icon will be displayed. Make sure you replace “linkedin” with “youtube” or whatever icon you want for the correct icon to be displayed. As you can see below, you can add as many icons as you like.
Here is the current list of available social icons:
If the icon you’re looking for is not listed above, you can easily add Font Awesome icons to the header and footer. Simply replace the code in the example above with this code and then follow the directions after:
<a href="#" class="icon">
<i class="fa fa-houzz"></i>
If you’re not familiar with Font Awesome, it uses <i></i> tags with specific classes to display the icon related to that class. In the example above, “fa-houzz” will display the Houzz icon. You’ll need to add Font Awesome to your website (really easy) for these classes to work. Here is a quick tutorial on how to do that. The code above will NOT work without Font Awesome installed on your site.