How to Add Easy Social Icons in the WordPress Navigation Menu

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge.

By Nathan Ingram   |  March 3, 2012

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.

Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.

If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.

Here’s the Video:

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn on CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

.menu-twitter {
	text-indent: -9999px;
	background-image: url(images/twitter.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 100px !important;
	width: 50px;
}

Here’s an explanation of the code:

  • The .menu-twitter class is what we added to the custom menu in step four.
  • Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
  • Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
  • Background-Repeat ensures that the icon only displays once.
  • Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
  • Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like http://yourdomain.com/social) then change the link in the css for the icon to this new location as below:

background-image: url(http://yourdomain.com/social/twitter.png) !important;

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

– – – – – – UPDATE 5/31/2012 – – – – – –

Opening Links in a New Window

To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.

Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:

Related posts:

Comments

  1. Thanks Nathan, a very informative article!

    One question: I am building a site currently, and having just tried this, my Twitter icon background image isn’t clickable…When I adjust the offset of the indent (to say, 99px instead of 9999px), I see the hyperlink is “following” the text (in this case, the word “Twitter”).

    I’m still rather new to WP, and the site is not yet live so unfortunately I can’t this moment share the url with you, but is there something I should look to check, to see why the icon isn’t clickable?

    Many thanks,
    Mark

    • Hi Mark, that’s awfully strange. Could it be that you added the URL in the “Label” area of the custom menu item rather than or in addition to the URL area?

  2. Hi,
    I got the image added, but I can’t get rid of the word “twitter” on the Footer menu.

    This is the code I used:
    .footermenu-twitter {
    text-indent: -99999px;
    background-image: url(‘http://rebelliousaddictiontwo.com/wp-content/mediafiles/2012/05/twiitersupersmall.png ‘) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }

    What did I do wrong?

    • Heather, that’s a strange issue. I’ve tried a number of things viewing your page in Firebug and was unable to make it work either. It seems to be a theme-related issue, but I can’t figure out what’s causing it in the CSS. Very odd indeed.

      • Hi Nathan
        Have the same problem as above wanting to place a facebook link.
        No link on image and the word ‘facebook’ is still to the left of the icon.

        If I replace background-repeat: no-repeat !important; with

        background-repeat: repeat-x !important;

        I get 4 icons and the hover link works over the left 3 icons.

        This is the original css I used
        .menu-facebook {
        text-indent: -9999px;
        background-image: url(../images/facebook_32.png) !important;
        background-repeat: no-repeat !important;
        margin-left: 100px !important;
        width: 50px;
        }

        .menu-facebook a:hover {
        background: #f5f5f5 !important;
        }

        Using wordpress 3.3.2 (no plugins)

        Any solution? as I would like to add other buttons

        Regards
        Graeme

  3. Nathan:

    Many, many thanks. I’ve been looking for a way to add the icons and after going down a lot of blind alleys I found your instructions and it works perfectly.

    All I did was add a top margin to line up the icons.

    Thanks so much!

    Chuck

    • Hi Nathan – being new to WordPress – can you please explain how to add a top margin? Mine are not lining up.

      Thanks!
      Lisa

      • Hi Lisa. Thanks for the comment. Adding a top margin is not a WordPress issue per se, it has to do with the CSS in your theme. You will need to add the CSS code to the styles.css file in your theme to get the top margin added. Feel free to contact me by hitting one of the gray circular links at the top left if you need more help.

    • Hi Chuck. I’m so glad this tutorial was helpful to you. That’s why I put them out there. It’s always an encouragement to me when people find them useful. Thanks for taking the time to comment.

  4. Hi – is there a way to open a new screen when a user clicks on one of the icons? Right now Twitter or Facebook are opened in the same screen.

    thanks!

    • Hi Gianna. Yes, absolutely you can. There is a setting for this in Screen Options. I’ve updated the post with that information and screen shots. Hope that helps!

  5. Hi Nathan-

    First of all THANKS! I searched high and low for this information and this was so helpful! Quick question for you – my primary menu has a hover of #373737. When I added the twitter icon as you suggested, the hover covers up the icon when I scroll over it. How do I fix this?

    Also – I love this comment plugin you have. Which is it?

    • Hi Angela. Can you post your URL or email it to me (nathan at brilliantly.net) if you’d rather not post.

      The comment plugin is Comments Plus from WPMU. I’m using it on several sites and have found it to be really powerful.

  6. Morning.
    I guess my wife and I are just not quite as good as we thought we were.
    We followed all directions. (we think)

    But still no workie 🙁

    http://www.link393.net/mm

    We were trying to get the facebook word to be a facebook icon.

    Would you mind giving us a helping hand?

    MUCH THANKS!!!
    Darrick

  7. Hello,

    I am also a newbie at wordpress and followed your directions to the t. The icons shows up so victory there, but the icon is getting cut off, is there something I should change to make it fit. Or do I need to resize the icon…. ??????

  8. I’ve used your code works great EXCEPT the theme has mouse over and so everytime i move my mouse over it the icon disappears. I cannot find where the code is in the theme. Can you help, the site is suppose to go live tomorrow

    • Hi Jim… the issue is that your css has a hover effect (a lighter brown) already in place for menu items and since one is not defined for the new facebook style, it’s reverting to the plain menu style and the icon disappears.

      Add this to your style sheet and it should work:

      .menu-facebook :hover {
          background-image: url("http://treehouse.is/wordpress2/wp-content/uploads/2012/04/facebook25.png") !important;
          background-repeat: no-repeat !important;
          margin-left: 10px !important;
          text-indent: -9999px;
          width: 25px;
      }
      

      This is basically a duplicate of everything in the .menu-facebook style but now it will also appear when you hover.

      Do the same thing for your twitter style.

  9. Hey,

    Im doing something wrong, but no idea what 😉

    see: http://www.motorsportfoto.nl/
    the last “button” (the empty one) is for Twitter

    When I add the code to style.css the text (Twitter) disappears, but the image isnt there 🙁

    This is the code, which is placed in the “/* begin Menu */ /* menu structure */” section of “style.css”:
    ******************************
    .menu-twitter {
    text-indent: -9999px;
    background-image: url(http://www.motorsportfoto.nl/wp-content/themes/MSF2images/twitter_001.gif);
    background-repeat: no-repeat;
    margin-left: 100px;
    width: 50px;
    }
    ******************************

    Could you help me out?

    • Hi Martijn,
      Generally when something like that happens, it’s because the theme’s existing CSS for menu styling is interfering with the new code. I’m happy to help you on a specific use case. I offer consulting for other developers and co-working via Skype. You can read more about that here.

      • Martijn Jakobs: How did you do it? I have the same issue too. I was really excited to try this out. Don’t know which codes to tweak in my theme (twenty-eleven) to show the icon.

  10. This is great! I was so excited to see the icons show up in the menu like you said. However I have some really funky hover issues. I read through all the comments and tried a few things, but still really funky hover that I can’t figure out.

    My code is below and the site is cleaneasyfood.com. Can you tell me if this is just a theme issue? I’ve been through so many themes that I can’t change again, so if it is, I will have to move the icons to the footer… I just need to know if it’s something I can easily fix or not. Thanks so much for all the great info!

    .menu-twitter {
    text-indent: -99999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-top: 5px !important;
    margin-left: 50px !important;
    width: 25px;
    height: 25px;
    }

    .menu-twitter :hover {
    text-indent: -99999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-top: 5px !important;
    margin-left: 50px !important;
    width: 25px;
    height: 25px;
    }

    .menu-facebook {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-top: 5px;
    margin-left: 10px !important;
    width: 25px;
    height: 25px;
    }

    .menu-facebook :hover {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-top: 5px;
    margin-left: 10px !important;
    width: 25px;
    height: 25px;
    }

    • Hi Andrea. Sorry it’s taken me a bit to respond. I only just saw your comment. Yes, you have an issue with the :hover on the menu items. Something in your theme’s CSS is bumping heads with the CSS above. If you’d like to schedule a consulting appointment, I can likely dig into the code and help you figure out what’s going on. Just let me know.

    • Thanks for the comment, Jim. If you did all the steps above and nothing changed, it’s definitely theme related. And with so many themes, it’s hard to say what the problem is without being able to see what you’re working with. Please provide a URL and I’ll give it a quick look.

    • Wow. Umm… Well, I’m sorry you found the explanation difficult. I suppose the tutorial does require some basic foundational knowledge to follow.

      I’m not sure what an “IDE” is (other than an antiquated data connection in a computer), but the “obscure” coding you refer to is simple CSS. If you’re planning on doing any kind of theme customization in WordPress, you’ll need to be familiar with its basics.

      Best of luck!

  11. For those experiencing issues with the text-indent and non-clickable icons, you might try:

    1. Updating the given selectors to ‘li.menu-twitter’, ‘li.menu-twitter a’, or ‘.menu-twitter a’. This will further target the navigation items, in the case that more general theme styling is interfering.

    2. Changing the text-indent property from ‘-9999px’ to ‘9999px’.

    In the case of a client of mine who had come across this tutorial, I had to update the provided selectors with the anchor tag (e.g. ‘.menu-twitter a’), and update the text-indent, and everything worked as intended.

  12. Hi – where exactly (in which field) do I type the code?

    .menu-twitter {
    text-indent: -9999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }

  13. Nathan! Great article. I did this a couple days ago before finding your article on my website but the icons disappear when I hover over them. I’m very new to this so I read and read and read only to find hover codes.. which I tried but they didn’t work.

    I redid the code using the code above but that didn’t solve the problem either. I know I’m missing something obvious but what would your advice be?

  14. Hi Nathan,

    I’m customizing my own blog using Custom-Community theme. I used your tutorial to add social media icons in header menu. It was a great help. However I feel that the space between each icon is too much, I want to reduce the gap but do not know how. I tried adding float-right & padding-0 but it didn’t change anything though CSS validator shows it is correct. Can you please help me out?

    I am not technical person and have no knowledge of CSS. Only know how to google for answers till I get them.

    This is the example of code I used for 2 consecutive placed icons.

    .menu-email {
    text-indent: -9999px;
    background-image: url(‘http://185.14.185.58/wp-content/uploads/2013/03/email.png’) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    float: right;
    padding-right: 0px;
    }

    .menu-flickr {
    text-indent: -9999px;
    background-image: url(‘http://185.14.185.58/wp-content/uploads/2013/03/flickr.png’) !important;
    background-repeat: no-repeat !important;
    width: 50px;
    float: right;
    padding-right: 0px;
    }

    • The spacing is coming from the width you have in the CSS code there. Change the width to 40px or 35px on each item and the spacing will look better.

    • Jen, the CSS declaration “text-indent: -9999px;” should move the text away from the icon as explained above. If this isn’t working, likely you have a theme-related issue. I’m happy to help if you’d like to retain my consulting services. Thanks!

  15. Hello.

    Thanks for a good tutorial. You can se the icons, but something else is wrong. The icon is not clickable, it’s like the text is over the icon and when you put the mouse over it appears like a grey box?

    This is my code;

    .menu-twitter {
    text-indent: -9999px;
    background-image: url(icons/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    height: 50px;
    }

    .menu-twitter :hover {
    background-image: url(icons/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 10px !important;
    text-indent: -9999px;
    width: 50px;
    }

    .menu-facebook {
    text-indent: -9999px;
    background-image: url(icons/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    height: 50px;
    }

    .menu-facebook :hover {
    background-image: url(icons/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 10px !important;
    text-indent: -9999px;
    width: 50px;

    }

    #page #access li:hover > a {
    background: #d8d9d8;
    color: #fff;
    }

    I have tried to get rid of the last hover background: #d8d9d8; thing.. but then it appears to be another problem. My theme is “forever”. Please, can you help me? This is a project for school and this is my last week to figure it out.

    Madelen

  16. Great tutorial. Simple but effective – the best kind of coding. I saw others but this was the best. The only thing I did different was keep the text so I changed the indent from -9999 to 50px.

  17. Hi i added 4 social button and it was great but there has one problem

    at last one has something weird background i want to get rid of that background but i can’t

    get rid of it. how could i fix it?

    • It could be that you need to move the styling to the li a rather than just the li. It depends on how your theme is doing things. I’m available for consulting if you need more detailed assistance (click the consulting link on the left menu).

  18. Hi! I did it and it work perfectly, the only problem like you said was that the icon was not perfectly positioned. No matter what I do the icon simply doesn´t move down, it’s sticked to the top of the menu bar. Can you recommend me something? I tried with padding, with position.. how can I center it?

    Thank you a lot!

    .menu-facebook {
    text-indent: -9999px;
    background-image: url(http://sweetdreamscupcakesycia.com/wp-content/uploads/2013/08/1376756989_facebook.png) !important;
    background-repeat: no-repeat !important;
    background-position: center-left
    backgroung-padding: 0.5em
    margin-left: 150px !important;
    width: 50px;
    }

  19. Hello, love the tut, i am using twenty twelve theme on localhost. the icon is there but it’s not clickable, if i remove the icon the twitter text is clickable, adding the icon renders it not clickable. i followed everything you did.
    any suggestions on how to make it clickable.
    Thankyou
    Mark

  20. Hi Nathan, this looks so interesting but I could not get this to work on my site. I’m wondering if it is because I am not self-hosting my wordpress blog and use the online admin css? My image is saved to my media library. Could you help me please?

    This is the code I entered at the end of my css:

    .menu-twitter {
    text-indent: -9999px;
    background-image: url(images/bike-perv-twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }

    .menu-twitter a:hover {
    background: #f5f5f5 !important;
    }

    I appreciate your time. I am just getting into css… I know nothing!
    Natalia

  21. Hello, thank you for this awesome tutorial.

    I have one question – here is my site – http://hamar.coma.lv/, there are two social icons in main menu.

    How do I move them on a same level as text and how do I set transparency to hover?

    Thanks!

    • Vadim, unfortunately the answer to your question is specific to your theme. You should probably consider retaining the services of a developer who can assist you.

    • This is possible, but you’d need to include some kind of javascript that would activate a sharing action. That is far beyond the scope of this post. However, I wouldn’t recommend adding share buttons to the nav bar. Share buttons are much more effective if placed closer to the content itself.

Leave a Reply