How to Add Social Media Icons to Your Website

Posted on 133 Comments

Social media is the new rage, and design is shortly behind that. In fact, plenty of folks are putting huge emphasis on both when it comes to their website.

So you beasking… “How can I add social media icons to my website?”

Well the answer is simple, and I’m here to tell you just how easy it is to do. Follow the steps below, and in no time – you’ll be sporting some super cool icons.

(This tutorial assumes that you are using the Genesis Framework for your site.)

Download Social Media Icons

Head on over to StudioPress and download the Social Media Icons graphics set.

The social media icons package will come with PSD files, in addition to pre-made transparent PNG files for each icon size – 48×48, 32×32 and 24×24.

Choose the Size and Upload to Your Server

The next thing you need to do is determine which size social media icons you want to display. Copy those files to your child theme’s images folder.

For instance, if you want to display the 32px social media icons, copy these files:

  • 32x32_facebook.png
  • 32x32_googleplus.png
  • 32x32_linkedin.png
  • 32x32_pinterest.png
  • 32x32_rss.png
  • 32x32_twitter.png

Create a Custom Menu for Your Icons

Inside your WordPress dashboard, go to Appearance > Menus and create a custom menu. Go to the Screen Options tab in the upper right hand corner of your screen and make sure you have the “CSS classes” option enabled.

You need to create Custom Menu links for the Facebook, Twitter and RSS icons. In the input box for CSS Classes, use social-facebook, social-googleplus, social-linkedin, social-pinterest, social-rss and social-twitter for your Facebook, Pinterest, RSS and Twitter icon links.

Here’s an example of how your custom menu link would look:

Social Twitter

Add Styling for Your Icons

Lastly, you’ll want to define how your social media icons will look. Below is sample CSS for the icons, and you can edit the code according to your needs.

Please note the #header in the CSS, as this is written if you are displaying the icons in your header right widget area. For your sidebar or footer, you’ll have to modify the CSS to reflect that.

/* Social Media Icons
------------------------------------------------------------ */

#header ul li.social-facebook,
#header ul li.social-googleplus,
#header ul li.social-linkedin,
#header ul li.social-pinterest,
#header ul li.social-rss,
#header ul li.social-twitter {
    float: left;
}

#header ul li.social-facebook a,
#header ul li.social-facebook a:hover,
#header ul li.social-googleplus a,
#header ul li.social-googleplus a:hover,
#header ul li.social-linkedin a,
#header ul li.social-linkedin a:hover,
#header ul li.social-pinterest a,
#header ul li.social-pinterest a:hover,
#header ul li.social-rss a,
#header ul li.social-rss a:hover,
#header ul li.social-twitter a,
#header ul li.social-twitter a:hover {
    display: block;
    height: 32px;
    margin: 0 0 0 10px;
    padding: 0;
    text-indent: -9999px;
    width: 32px;
}

#header ul li.social-facebook a {
    background: #333 url(images/32x32_facebook.png);
}

#header ul li.social-facebook a:hover {
    background: #000 url(images/32x32_facebook.png);
}

#header ul li.social-googleplus a {
    background: #333 url(images/32x32_googleplus.png);
}

#header ul li.social-googleplus a:hover {
    background: #000 url(images/32x32_googleplus.png);
}

#header ul li.social-linkedin a {
    background: #333 url(images/32x32_linkedin.png);
}

#header ul li.social-linkedin a:hover {
    background: #000 url(images/32x32_linkedin.png);
}

#header ul li.social-pinterest a {
    background: #333 url(images/32x32_pinterest.png);
}

#header ul li.social-pinterest a:hover {
    background: #000 url(images/32x32_pinterest.png);
}

#header ul li.social-rss a {
    background: #333 url(images/32x32_rss.png);
}

#header ul li.social-rss a:hover {
    background: #000 url(images/32x32_rss.png);
}

#header ul li.social-twitter a {
    background: #333 url(images/32x32_twitter.png);
}

#header ul li.social-twitter a:hover {
    background: #000 url(images/32x32_twitter.png);
}

Email Newsletter

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.

Comments

  1. says

    Too funny, I was just doing this to the Corporate theme this morning. Only I used your Social media plugin – looks like this way would give me more control…. Now I know what I’ll be doing this afternoon! :) Thanks for the timely tip!

    Reply

  4. says

    Hi Brian
    I used Nathan’s Social Icons plugin – creates a social icons widget.
    If the plugin wasn’t so brilliant… I would use your code.

    Appreciate the tutorial

    Reply

  6. says

    You have no idea how much I appreciate you sharing this information. Now I won’t have to go on Elance and hire someone to this very task. I can just do it myself. Thanks again.

    Reply

  7. says

    Interesting, I like this method much better than the widget. However, the limited number of social icons is going to make me hunt for new ones. Why the small number of icons?

    Reply

  8. says

    Thanks for the great tip!

    I, too, love the Social Profiles widget. Any idea if both (your tip, and the widget) will be getting updated with the latest social media icons (G+, YouTube, etc.)?

    Thanks! :D

    Reply

  10. Berry says

    Can I add these icons any where in my child theme? What would the hook or code be to place them in a page template?

    Reply

  11. says

    Thank you Brian for the information. This method of doing things – using wordpress functionality to add content (together with Genesis) makes it easier to “modularize” a website for multiple projects. I’m quote obsessed with website customization but not at the expense of ease of use and installation. I’m now a fan and looking forward to more links or resources pertaining to this strategy.

    Reply

  14. says

    Brian,

    Thank you for the terrific ease with which was done. In less than two minutes I was up and running with the icons–thanks!

    I would, however, like to see the icons flush to the right edge of Header Right — just like you have them. However, vertically centered within the height of the header area.

    I’ve tried a number of tweaks in the CSS to make that happen, but it hasn’t worked. I’m guessing it can’t be done doing the social icons as a custom nav menu?

    dt

    Reply

  17. says

    Hi Brian!
    You’re awesome! Thanks so much!

    May you wanna know a little mistake in the css above code:
    there’s a mismatch in the image’s name
    Just here:
    #header ul li.social-linkedin a {
    background: #333 url(images/32x32_facebook.png);
    }

    Good Luck!
    there’s a image name mismach

    Reply

  20. Daniel says

    Hi

    I have enabled the RSS Feed Links under Primary Navigation in the Genesis Theme Settings. These I can use with Feedburner.

    Ideally, I would want to place say my, similarly sized twitter icon along side these. Would I create custom menu as you have outlined?

    I am happy to hack php or use Simple Hooks if this is required ( after a full backup)

    Reply

  22. says

    Brian

    When adding to the header right , it takes on the background color of the header menu.
    How can I change this?
    I tried .custom-menu, .social-menu and a number of others and no luck.

    Thanks

    Mike

    Reply

    • says

      Here’s the code I placed into my functions file:

      /** Customize footer right section */
add_filter( 'genesis_footer_creds_text', 'bg_footer_right' );
function bg_footer_right($creds) {
    $creds = '<ul><li class="social-rss"><a href="http://feeds.feedburner.com/briangardner">RSS</a></li><li class="social-plus"><a href="http://www.briangardner.com/plus">Google Plus</a></li><li class="social-twitter"><a href="http://twitter.com/bgardner">Twitter</a></li><li class="social-facebook"><a href="http://www.facebook.com/bgardner">Facebook</a></li></ul>';
    return $creds;
}

      Obviously each image has a class assigned to it, which you can Firebug and grab the CSS for each icon.

      Reply

  24. says

    Brian,

    Thanks for the awesome theme and awesome tutorial. My questions is – if you want to add these to a sidebar widget instead of the header right space, how does the snippet of code need to be modified?

    Thanks,

    Brock

    Reply

  26. says

    It would be really nice if this functionality can be added to Genesis framework, just a basic plugin would work. If some one wants to customize it then they can modify accordingly to suit their need.

    thanks.

    Reply

  27. Will says

    Hi Brian,
    Thanks so much for the tutorial! Followed right along and using this for my navigation bar.

    My question is, how could I get it to show the navigation label as well. Having an icon AND text?

    Thanks a million!

    Reply

  28. Wayne Kolenchuk says

    Wondering how I can position these to the right of the main menu, where date, RSS, Search & Twitter can now be added if enable extras are enabled.

    Reply

  32. says

    I probably am missing something obvious, but I haven’t been able to get the same results using the CSS and custom menu. I’m using the Balance theme; I don’t know if that makes a difference. I’m also using my own icons rather than a purchased set. I thought I would ask for help before I break something in the CSS and have to start from the very beginning. My site is http://www.writerightwords.com. Please ignore how ugly it is. I’m still in the early stages of building it.

    Reply

  33. says

    Nathan’s social plugin is great, thank you for offering it to the community. I have this silly block on something. The icon and hover colors may be determined in the widget itself which is very useful – the less coding the better. But these color attributes apply to all the icons. Which CSS file do I modify to determine different colours for different icons, whilst still using Nathan’s plugin? I have read through your post and comments and there is something I just don’t understand. Thank you very much for your clarification (no need to be detailed, just point me in the right direction). Doris

    Reply

    • says

      We had talked about whether or not to offer different colors for different icons. While we originally liked the idea, we decided that it would make the UI of the widget not so great for user experience. I am planning on writing a follow up tutorial to this post with how to use the new plugin, and I will include how to add custom css to for making individual colors for social media icons.

      Reply

  34. says

    I am using Magazine Basic as my theme – Will I be able to place these icons in my header using a different theme than Genesis. I also do not see the “CSS classes” option enabled anywhere after I click the + sign to create a new menu???

    If I just copy your code above how do I create the hyperlinks to my social media accounts?

    Thanks

    Reply

  36. says

    i’m trying to add this to my style.css, here is what i have:
    /* Social Media Icons
    ———————————————————— */

    #footer ul li.social-facebook,
    #footer ul li.social-twitter,
    #footer ul li.social-tumblr,
    #footer ul li.social-pinterest,
    {
    float: left;
    }

    #footer ul li.social-facebook a,
    #footer ul li.social-facebook a:hover,
    #footer ul li.social-twitter a,
    #footer ul li.social-twitter a:hover,
    #footer ul li.social-tumblr a,
    #footer ul li.social-tumblr a:hover,
    #footer ul li.social-pinterest a,
    #footer ul li.social-pinterest a:hover,
    {
    display: block;
    height: 50px;
    margin: 0 0 0 10px;
    padding: 0;
    text-indent: -9999px;
    width: 50px;
    }

    #footer ul li.social-facebook a {
    background: #333 url(resource/rsrc/uploads//2012/04/50x50facebook-icon.jpg);
    }

    #footer ul li.social-facebook a:hover {
    background: #000 url(resource/rsrc/uploads//2012/04/50x50facebook-icon.jpg);
    }

    #footer ul li.social-twitter a {
    background: #333 url(resource/rsrc/uploads//2012/04/50x50twitter_icon.jpg);
    }

    #footer ul li.social-twitter a:hover {
    background: #000 url(resource/rsrc/uploads//2012/04/50x50twitter_icon.jpg);
    }

    #footer ul li.social-tumblr a {
    background: #333 url(resource/rsrc/uploads//2012/04/50x50tumblr_icon.jpg);
    }

    #footer ul li.social-tumblr a:hover {
    background: #000 url(resource/rsrc/uploads//2012/04/50x50tumblr_icon.jpg);
    }

    #footer ul li.social-pinterest a {
    background: #333 url(resource/rsrc/uploads//2012/04/50x50pinterest_icon.jpg);
    }

    #footer ul li.social-pinterest a:hover {
    background: #000 url(resource/rsrc/uploads//2012/04/50x50pinterest_icon.jpg);
    }
    and i’ve added to the bottom, and i’ve added it under ‘footer’ and no avail.
    i would use your widget but you don’t have tumblr as an option. help! thanks.
    -diana

    Reply

    • says

      Ack, Diana – so sorry I missed this comment. It was buried in my spam folder.

      I took a look at your site, and it looks like you’ve got some icons in the footer. Did you manage to figure it out?

      Reply

  37. says

    Hi Brian, I have the new plug in but my client needs the icons to align with the main navigation bar instead of the right header, can you help? Thank you :)

    Reply

  38. Stephen says

    Hey Brian,

    Thanks for the post! However, I’m not seeing the results after updating my style sheet (CSS). Is this something that takes a minute or two to propagate?

    Reply

  40. Marj Esch says

    Thank you, Brian, for taking the time to post this. EXACTLY what I needed to float a few social icons off to the right of my primary navigation search form. LOVE Genesis…you rock!

    Reply

  41. says

    Hi Brian, I’ve added the code to the editor part of the Dashboard and still don’t see the icons on the page. Can you please tell me what I’m doing incorrectly? Thanks!

    Reply

  42. Troy says

    Your the man and thank you for sharing this with us! I was previously trying to put my social icons in a text widget in the footer, but this approach makes the process truly seamless. Genesis for president! lol.

    Reply

  46. Kari says

    Are you allowed to stylize the social media icons? In other words, can you change the look of the twitter icon itself or is this against twitter policy?

    Reply

  47. Rick S. says

    Hi Brian

    I am working on a site locally and downloaded your social plugin. I am using the optimal child theme. I can place the socials with no problem in the header or footer. However, I cannot seperately customize them. In another words I want the icons on the header to be 48px and footer to be 32px and for some reason this cannot be done. If I change one area it effects the other. Can you please help.

    Reply

  48. Bob R says

    Brian, how do I write the code for a DONATE button in the header menu in Family Tree theme? I’d like to display it where the menus (yeah, they are added as custom menus, I know) that say for “mommybloggers, for scrapbookers, for photographers” shows.
    Is there a easier way to do this using a widget?

    Reply

  49. says

    Hi Brian,

    Many thanks for this tutorial. However, I’m having trouble adding the social media icons to the footer section of my website. I have replaced all instances of #header with #footer and have followed the instructions in the above tutorial step-by-step, including adding the custom classes.

    All I see on my site is the text links, NOT the social icons. Would you be kind enough to take a look? As a side note, I don’t use the Simple Social Icons plugin because the icons don’t align properly to the left… there’s always about a 5px indent.

    Thanks again,

    Connor

    Reply

  51. says

    Hi Brian!

    This tutorial was perfect – however my theme (quattro) has stars for the list icon and I can’t figure out how to take them out while adding in the social media icons.

    Thanks!
    Julie

    Reply

    • says

      Try adding the following CSS:

      background: none;
padding: 0;

      To this in your style sheet in this section:

      #sidebar ul li.social-facebook, #sidebar ul li.social-googleplus, #sidebar ul li.social-linkedin, #sidebar ul li.social-pinterest, #sidebar ul li.social-rss, #sidebar ul li.social-email, #sidebar ul li.social-twitter {

      You might also need to add this:

      overflow: hidden;

      To this:

      .sidebar .widget
      Reply

  53. Rob D says

    Hi Brian,

    I’ve been looking for specific icons to add to a sidebar bar area, Yelp, OpenTable, and Vimeo. I had already downloaded the Simple Social Icons plugin, it works and looks great but the icons that I’m currently looking for are not included. I have searched all over and have found nothing suitable. I’m new at webdesign and WordPress. I only use Studiopress themes and themes from its community. I am concerned about altering code and the effect it may have on a responsive theme and new theme versions? How would the code differ above if I wanted to add icons to a side bar? Any suggestions where I could find suitable icons for Yelp, OpenTable, and Vimeo for the method above? Thanks in advance for any help! Rob

    Reply

    • says

      The only way to get those icons into the plugin we’ve built is to hack the plugin. The downside of course is that it would get overwritten in a plugin update, but it might be worth the risk as it’ll probably be a while before we do the update.

      Reply

    • says

      Hello Brian,

      I followed the steps above to see what this would look like in my sidebar, the only problem I’m having is that the two icons I’m using appear one on top of the other? How can get them to appear side by side? How many of these icons could I have sized at 32×32 displayed side by side in the sidebar? And lastly could I simply replace the icon images with my own, will this effect the way they are set up to work? Thanks for any help!!!

      Reply

  55. says

    Thanks, Brian. This is great! I would love to know how to add these icons to each post as well as post excerpts on my blog page. I have tried numerous plugins and none of them pull the correct post. They all seem to pull the first post on the page. You can also forget finding a social plugin that validates. That’s a real nightmare! Thanks!

    Reply

  57. says

    Brian I was looking for quite some time to find this kind of tutorials. Just one question, how can I add those icons on the same line in sidebar?

    I dont’ want to use plugins, because they are slowing the loading time of websites.

    Reply

  58. says

    Hi Brian , could you please have a look , why I can’t get the Youtube Icon to Appear in My Footer – I thought I have done everything right, but it seems to have some issue somewhere.

    Also Thanks for your Awesome Tutorials – I’m really enjoying them

    Reply

  61. says

    Just got the hang of it. Figured I’d test this trick out on my friend’s site before going into my style sheet. Thanks for making such a cool product. I didn’t even know what a style sheet was a year ago. So that should tell you the directions you provided us with are spot on.

    Reply

  62. says

    I followed your instructions and nothing is showing up. I’m trying to get my icons into the header. When I created my custom menu, it does say “your theme only supports one menu”, but I assumed that meant for navigation purposes. Does this mean I won’t be able to get the icons in my header using your tutorial?

    Reply

  63. says

    What # value do I have to use to get the Icons to appear on my right of my Primary Nav bar?

    Or if I use the Simple Social Icons plugin how do I make them appear in the same place.

    This simple little task is causing me some problems.

    Many Thanks
    Roger

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>