Add social icons to header and footer
If you find this tweak helpful:
Beginners
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.
PHP
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:
|
1 2 3 4 5 |
<li class="et-social-icon et-social-linkedin"> <a href="#" class="icon"> <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span> </a> </li> |
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:
.et-social-facebook
.et-social-twitter
.et-social-google-plus
.et-social-pinterest
.et-social-linkedin
.et-social-tumblr
.et-social-instagram
.et-social-skype
.et-social-flikr
.et-social-myspace
.et-social-dribbble
.et-social-youtube
.et-social-vimeo
.et-social-rss
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:
|
1 2 3 4 5 |
<li class="et-social-icon"> <a href="#" class="icon"> <i class="fa fa-houzz"></i> </a> </li> |
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.
73 Comments
Thanks! This was really helpful!
February 13, 2015
Hello, i am trying to add TripAdvisor icon to header and footer by using an image but it look not good because footer show the big icon and header show the small icon.
How can i fix it?
Thanks you!
April 12, 2017
I’m building a Divi site using Divi Children plugin and thought I followed your instructions exactly however it’s not working. The file structure is Divi-child / divi-children-engine / includes / divi-mods / social_icons.php. I didn’t create the includes folder. It was already there. Should I create a different Includes folder in divi-child and not divi-child-engine?
February 19, 2015
Hi Jill. Were you able to get this working? I’m not familiar with this plugin but if you’re still having problems, I’ll check it out and see if I can get it to work for you.
February 26, 2015
For divi children setup you need to add an includes folder to the child theme folder and create file inside of it called social_icons.php. This file will replace the one in the parent folder. Just copy to code from the parent social_icons.php file into the new one you created in the child folder. At this point you can customize it.
wp-content
–themes
–Divi
–Your divi child theme
— add ‘includes’ folder
— add ‘social_icons.php’ file and copy from the parent file into it
December 13, 2015
Hi Brad,
I am trying to find a way to align the socials in the header section on the right side. Any direction would be much appreciated.
March 13, 2015
Hi Jassy. Depends on if you want phone number and email on left and social icons on right or everything on right. For everything, just add #et-info {float: right;}
If you want it all the way up against the right, add #top-header .container {width: 100%;}
If you want info on left and social on right, add #et-info {width: 100%;} and also #top-header .et-social-icons {float: right;}
March 18, 2015
Hello, great to see a tut like this. On the support forum they just do not give the info. The icons I am searching for are deezer, spotify and soundcloud, are these also available?
Thanks
Frenk
April 10, 2015
Thanks Frenk! Those icons do not appear to be available in Divi. You’ll have to manually add them in the header.php file or footer.php file. You can usually find some OK icons here: http://findicons.com/. Let me know if you need help with the html
April 12, 2015
I’d love help with the HTML of adding a social icon to the footer…
January 29, 2016
Hi there!
Nice blog, very useful!! TY!!
I’ve just added the “instagram” icon at the footer and it looks great but at the end of the URL (link) DIVI automatically adds a rare code: %E2%80%8E and brokes the link 🙁
URL —> https://instagram.com/anomysup%E2%80%8E
Can u help me w this?
thanks for your time!
June 23, 2015
Check your the URL. You may have added a space at the end or didn’t close it properly with double quotes? Possibly saving the file in a different encoding? Should be UTF-8. I just tried it on 2.4 and still works. Thanks.
June 28, 2015
I am having the same problem. No spaces in my enclosed href and I have saved the file in utf-8 from notepad. Any ideas how to fix this?
It is happening on youtube and instagram links as well
November 23, 2015
Hi Lindy. Are you trying to edit this in the WordPress editor, Cpanel, or FTP? Whichever method you are using, try using one of the other two and see if that works.
November 24, 2015
Hi Brad. I was FTPing the php file. I have tried in wordpress editor and no change. Tried in cpanel to and it changed the character to ‎ which is still causing the link to file… Very strange!
November 24, 2015
Actually the ‎ character was showing up in the cpanel code editor (file manager) and then I was able to remove it! All good. Thanks for the tip. I guess an encoding issue..
November 25, 2015
Great to hear Lindy! Glad you got it working
December 9, 2015
I tried to follow your directions but must have gone wrong somewhere. I am trying to build a link in my footer to link to my company’s linkedin page. I have looked over the URL many times but keep getting an additional %u200E. Therefore, the link is directing to a page not in existence. Do you have any tips for what I may be doing wrong?
Thank you!
July 6, 2015
Hey Martin, looks like you figured this one out
July 22, 2015
Hi, whats the solution to the additional %u200E issues please? It appears when social icons are in use in the footer. Thanks
April 12, 2016
I am having the same issue – has anyone figured out why this is happening?
September 28, 2016
I have the same problem using RDP and notepad++. There should be no encoding issues. It just is adding junk to the end.
Here is my exact code:
March 15, 2017
Thank you, this was really useful!
August 23, 2015
Put the code after the last but before and that will remove dditional %u200E
October 6, 2015
For whatever reason, adding this to a new child theme breaks the main navigation menu. Selecting the menu location in the customizer fixes it.
October 23, 2015
I have copy and pasted the code above for all version of Divi and never had any issues. My guess is that the way I was displaying the code previously may have been replacing single quotes with back ticks. I’ve changed the way I display the code since then so this should solve that problem if in fact it was a problem. Please let me know if you continue to have problems. Thanks.
October 28, 2015
This works where Elegant Themes Divi support is unable to answer. Thanks!
October 27, 2015
Thank you for this. Where can I see which icons are available in Divi?Others have mentioned Soundcloud, etc.
November 14, 2015
Hi Joel. I updated the post to show all social icons currently available in Divi
November 24, 2015
Super Easy!! Thanks
November 19, 2015
Is it possible to add a custom icon to the social media list? I want to add an icon for Houzz an it is currently not available on the list.
January 8, 2016
Hi Paul. I am very sorry for such a late response but for anyone else interested, I found that Font Awesome icons can easily be added to the social links in the header and footer. I’ve updated the tweak above to demonstrate how to do this.
March 15, 2016
I’m wondering if we could add the according .et-social-tripadvisor in social-icons.php file.
Thank you!
January 9, 2016
Hi Eva. Sorry for the late response. I’ve updated the tweak with instructions on this. Just replace fa-houzz with fa-tripadvisor. Thanks.
March 15, 2016
Can anyone tell me how do i change the color the social icons at all?.. i need to change them to purple
February 6, 2016
Hi David. You can change the social icon color in the top bar with something like this:
#top-header .et-social-icon a {
color: #000;
}
and this for the footer icons:
#footer-bottom .et-social-icon a {
color: red;
}
March 15, 2016
How to add Foursquare icon?
February 12, 2016
I’ve udpated the tweak to show how to do this. Just replace fa-houzz in the example with fa-foursquare
March 15, 2016
Hi,
Thank you for the code and it seems to work only when I am logged in. When I log out those icons do not show. Any ideas why it would do that?
March 2, 2016
If I had to guess I would say a caching plugin that does not load cached pages if you are logged in as admin
March 15, 2016
Sorry, but I can’t get it to work. (want to add instagram)
I followed the instructions, but can’t see the new icon in header. Just added the code provided right before , but doesn’t work
(Prior to work on the child, activated the parent theme and added the code in social_icon s.php to test, but nothing)
Since the activation of the icons in the updated DIVI (2.6.4.4) is via the Theme Options, is it compatible?
Should an additional option for the new icon appear under Facebook, twitter and RSS?
Please help. I don’t want to mess up with code.
March 9, 2016
Hi Toni. You also might be experiencing a caching issue. I’ve tested this with Divi 2.6.4.4 and it still works. Make sure you disable/clear your cache if you are using a caching plugin.
March 15, 2016
Brad,
I can see the icon but when clicking the URL has additional extra characters added to it rendering it broken. For example “https://www.instagram.com/voicesout%E2%80%8E” has the extra “%E2%80%8E” added at the end breaking the Instagram link.
Any suggestions? Ive tried many different URL combinations http https www. no www. /at the end no /at the end…..
May 20, 2016
I’ve got the same problem. Did you find a solution?
December 19, 2016
Thank you, It’s working
March 12, 2016
Hi there!
I’m not sure this is the right place to post my problem, but I’ll try anyway : )
I’m working on a website using DIVI 2.5.9 and DiviKit, a child theme.
At the beginning, I was able to show/hide the social icons in the footer with the theme customer / footer, but it doesn’t work anymore!
When I try to show them again, nothing happens.
I’ve made some changes in the footer’s PHP file to put my credits instead of “DIVI / WordPress etc”, but it doesn’t seems to be connected:
I put back the original PHP file and it still doesn’t work : (
Any idea please?!!
March 22, 2016
Sorry for such a late response Thierry but make sure your child theme is active and make sure you are editing the correct version of the file. You need to edit the file within your child theme folder.
May 26, 2016
Hi, Can you tell me how to set the links for Facebook and Twitter so that they open in a new tab? I have used your code to add LinkedIn and that opens in a new tab but FB and Twitter don’t.
Many thanks,
Susie
April 20, 2016
To open URLs in a new tab you use this structure:
So the example above would become:
May 26, 2016
The rel=”nofollow” part of my code above is optional. WordPress is adding it to my comment
May 26, 2016
i got added the instagram and linkedin but theyu dont seem to appear in the backend how to fix it
May 5, 2016
Can you explain Sneha? I’m not sure what you mean “don’t seem to appear in the backend”
May 26, 2016
Hello, thank you for posting this. I have tried your code but for some reason the new icons are added in the form of bullet points under the standard existing icons I already had. How do I fix this?
May 22, 2016
Hi Polina. Sounds like maybe you added the code in the wrong place. Make sure the links are added within the list in between these two tags:
and
May 26, 2016
Hi Brad,
I came to your site, after trying the instructions for adding social icons on the Elegant Themes site – those didn’t work for me.
I created a child theme according to your great instructions, activated it and confirmed activation using by adding the line for background colour to the style.css file in the child theme – worked great.
I copy and pasted your code to add an Instagram icon to my footer into a copy of social_icons.php that I then uploaded into the child theme folder. I placed the code the first time between the code for the Facebook and twitter icons – but no icon appears. Then I placed it at the end, before the tag. But again no Instagram icon. I also made sure my text editor was saving the file as UTF-8. Any idea what might be wrong?
June 24, 2016
Hi Paul. Did you make sure the social_icons.php file was placed inside a folder called “includes” in your child theme? You need to maintain that folder structure /wp-content/themes/Divi-child/includes/social_icons.php. You don’t need to add everything from the includes folder. Just create an empty folder in your child theme folder, name it “includes”, and then move your social_icons.php file into that empty folder. Hope this solves your problem!
June 29, 2016
Wokrs great. Thank you
July 20, 2016
Hi, how can i achieve the “stand out from the crowd” effect in your sidebar?
December 27, 2016
Hi Chris. I enclosed the text in a span with class “stand_out” and then applied the following CSS to that class:
.stand_out {
display: inline-block;
position: relative;
}
#content:hover .stand_out {
color: #000;
font-weight: 700;
-webkit-animation-name: linkQuake;
-moz-animation-name: linkQuake;
animation-name: linkQuake;
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes linkQuake {
0% {
transform: translate(2px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(0px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 1px) rotate(-1deg);
}
60% {
transform: translate(-3px, -2px) rotate(0deg);
}
70% {
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -2px) rotate(1deg);
}
90% {
transform: translate(2px, -1px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
@-moz-keyframes linkQuake { /* Firefox */
0% {
-moz-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-moz-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-moz-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-moz-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-moz-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-moz-transform: translate(-1px, 1px) rotate(-1deg);
}
60% {
-moz-transform: translate(-3px, -2px) rotate(0deg);
}
70% {
-moz-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-moz-transform: translate(-1px, -2px) rotate(1deg);
}
90% {
-moz-transform: translate(2px, -1px) rotate(0deg);
}
100% {
-moz-transform: translate(1px, -2px) rotate(-1deg);
}
}
@-webkit-keyframes linkQuake { /* Safari and Chrome */
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 1px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, -2px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -2px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, -1px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}
March 20, 2017
Hi Brad, thanks so much for your incredibly useful explanation. I would like to take out the google + and rss icon – I’ve successfully added the instagram and linkedin icons. However, if I try to take out any of the icons that came with the theme, it breaks my whole page!! Please let me know from where, to where I remove the code – or at least comment it out!!
Thanks in anticipation,
Tessa
January 27, 2017
Hi Brad,
I’ve followed your instructions (not in a child theme though– in the regular theme documentation) and the Instagram and Pinterest icons don’t show up. Any advice?
May 3, 2017
Outstanding, many thanks!
August 26, 2017
I created includes folder in my child theme and then created socialicons php file too as you stated above. I did everything correct to the best of my knowledge, but it still din’t work for me
January 14, 2018
Thanks! Helped me a lot! 🙂
March 14, 2018
I tried your instructions and it didn’t work for me 🙁
I have the social_icons.php file in a folder called includes modified with the code you suggested in my child theme folder. I have no idea what i’m doing wrong. I re-read all the instructions too.
May 6, 2018
Great tut!
Btw is that possible to make those social media channels to open in a new window? By default, it opens in the same window.
December 12, 2019
Hello,
I want to add phone, email, fax icons in the footer section. Please help?
December 23, 2019
Can’t find the simple social media links settings in Divi to save my life.
February 4, 2020
Thanks, Brad! It still works. It Helped me a lot!
May 14, 2020
Hi there, is this still working following the most recent update which included big icon changes? All my tweaked LinkedIn logos have vanished! If not, do you have another workaround, which doesn’t involve installing a buggy plugin like Divi Icon Party?
Thanks,
Doug
November 15, 2021
Add this to custom css:
.et-social-linkedin a.icon:before {
content: ‘\e09d’;
}
.et-social-youtube a.icon:before {
content: ‘\e0a3’;
}
February 8, 2022
Hi, I had the child theme set up to replace the Google icon with the youtube icon, but it stopped working. I then tried to replace the Twitter icon with the youtube icon, but it does not work. Please advise
June 13, 2022
It looks the youtube icon is not available anymore. Where could I find it?
June 22, 2022