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. 

20% Discount!!!
Divi WordPress Theme

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:

 

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.

Screen Shot 2014-07-24 at 1.24.49 PM

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:

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.

    62 Comments

  1. Thanks! This was really helpful!

    Ella Feeney

    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!

      Vuthy Phoneg

      April 12, 2017

  2. 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?

    Jill H

    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.

      Brad (admin)

      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

      Ernest Smuga

      December 13, 2015

  3. 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.

    Jassy

    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;}

      Brad (admin)

      March 18, 2015

  4. 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

    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

      Brad (admin)

      April 12, 2015

      • I’d love help with the HTML of adding a social icon to the footer…

        Angel

        January 29, 2016

  5. 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!

    xavier

    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.

      Brad (admin)

      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

        Lindy

        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.

          Brad (admin)

          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!

            Lindy

            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..

            Lindy

            November 25, 2015

        • Great to hear Lindy! Glad you got it working

          Brad (admin)

          December 9, 2015

  6. 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!

    Martin

    July 6, 2015

    • Hey Martin, looks like you figured this one out

      Brad (admin)

      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

        Lish

        April 12, 2016

        • I am having the same issue – has anyone figured out why this is happening?

          Cassie

          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:



            Josh

            March 15, 2017

  7. Thank you, this was really useful!

    Natalia

    August 23, 2015

  8. Put the code after the last but before and that will remove dditional %u200E

    Tom

    October 6, 2015

  9. For whatever reason, adding this to a new child theme breaks the main navigation menu. Selecting the menu location in the customizer fixes it.

    Randall

    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.

      Brad (admin)

      October 28, 2015

  10. This works where Elegant Themes Divi support is unable to answer. Thanks!

    E

    October 27, 2015

  11. Thank you for this. Where can I see which icons are available in Divi?Others have mentioned Soundcloud, etc.

    Joel

    November 14, 2015

    • Hi Joel. I updated the post to show all social icons currently available in Divi

      Brad (admin)

      November 24, 2015

  12. 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.

    Paul

    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.

      Brad (admin)

      March 15, 2016

  13. I’m wondering if we could add the according .et-social-tripadvisor in social-icons.php file.
    Thank you!

    eva

    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.

      Brad (admin)

      March 15, 2016

  14. Can anyone tell me how do i change the color the social icons at all?.. i need to change them to purple

    David

    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;
      }

      Brad (admin)

      March 15, 2016

    • I’ve udpated the tweak to show how to do this. Just replace fa-houzz in the example with fa-foursquare

      Brad (admin)

      March 15, 2016

  15. 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?

    Mike

    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

      Brad (admin)

      March 15, 2016

  16. 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.

    Toni Postius

    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.

      Brad (admin)

      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…..

        Seviant

        May 20, 2016

        • I’ve got the same problem. Did you find a solution?

          Rebekka

          December 19, 2016

  17. 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?!!

    Thierry

    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.

      Brad (admin)

      May 26, 2016

  18. 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

    Susie

    April 20, 2016

    • To open URLs in a new tab you use this structure:

      So the example above would become:

      Brad (admin)

      May 26, 2016

    • The rel=”nofollow” part of my code above is optional. WordPress is adding it to my comment

      Brad (admin)

      May 26, 2016

  19. i got added the instagram and linkedin but theyu dont seem to appear in the backend how to fix it

    sneha

    May 5, 2016

    • Can you explain Sneha? I’m not sure what you mean “don’t seem to appear in the backend”

      Brad (admin)

      May 26, 2016

  20. 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?

    Polina

    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

      Brad (admin)

      May 26, 2016

  21. 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?

    Paul

    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!

      Brad (admin)

      June 29, 2016

  22. Wokrs great. Thank you

    Łukasz

    July 20, 2016

  23. Hi, how can i achieve the “stand out from the crowd” effect in your sidebar?

    chris

    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);
      }
      }

      Brad (admin)

      March 20, 2017

  24. 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

    Tessa Hanafin

    January 27, 2017

  25. 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?

    Charlene

    May 3, 2017

Trackbacks/Pingbacks

  1. Making child themes part of your business development best practice. | Jonathan Bossenger - […] Copy the /includes/social_icons.php file to add additional social media icons to your header or footer. […]
  2. Ajouter des icones de réseaux sociaux dans le footer | Mondyde - […] Add social icons to header and footer […]

Post a Reply

Your email address will not be published. Required fields are marked *