How to Add Social Media Icons To Your Navigation Bar in WordPress


By Amanda Karen | CrunchSum



We all know that there are an abundance of social sharing plugins that can be used in WordPress. But, what if you do not like any of those? What if you want to have more control over the social media icon design and placement on your webpage? This tutorial will help you to achieve just that. Learn how to add you own social media icons to your WordPress website in 5 easy steps.

    Disclaimer: This tutorial assumes that you are using the Twenty Eleven theme, but can be applied to any WordPress theme. It also assumes that you are familiar with using child themes and menus.


    Step 1: Get Your Social Media Icons

    One quick Google search will lead you to several sites that offer free downloads of social media icons. If you have a favorite, please link it below to share with others. As always, confirm before you use the icon that it is approved for commercial use, etc. The WordPress icon below will be used for this tutorial.

    adding social media icons in wordpress

    Step 2: Save the Icon

    You should have an “Images” folder saved in your child theme folder. If you don’t, create one and save your icon there.



    add social icons to your navigation bar in wordpress

    If you are not familiar with using a child theme in WordPress learn about it here: Simple Tutorial on Using Child Themes in WordPress.


    Step 3: Add a New Custom Link To Your Menu

    In your WordPress dashboard go to Appearance, Menus, and find the Custom Links box. Input the appropriate social media url, linking to your account or webpage. Click “Add to Menu”.



    adding social media icons to navigation bar in wordpress

    If you are not familiar with using menus in WordPress read: 7 Effective Steps to Follow for Creating Menus in WordPress to learn more.


    Step 4: Add CSS Class

    Click on the drop down arrow to open your icon. There should be a field named CSS Classes (optional)*. Input a name in that field. You can name it whatever you want. You will reference this name in your CSS styling sheet in the next step.



    adding social media icons to navigation bar in wordpress

    *If you do not see the CSS Classes (optional) field, scroll to the top of your screen and click on the “Screen Options” arrow. Make sure under advanced menu properties, CSS Classes is selected.



    adding social media icons in wordpress

    Step 5: Add Styling to Your CSS Style Sheet

    You will want to add the following code in your child theme’s style.css file – or to whatever CSS style sheet you are using for your child theme. If you do not input some variation of the following, your social media icon image will not show up on your webpage.

      adding social media icons to navigation bar in wordpress

      CSS styling should output to something like this:



      adding social media icons to nav bar in wordpress

      Important Things To Note

      a) From inspecting the webpage element, we know that the area of the webpage that needs to be manipulated for the styling of our social media icon is the “access” id. This may be named something different for your webpage, so this is something that you will want to confirm before going forward. However, if you are using the WordPress Twenty Eleven theme, you should be fine.


      b) Take note that the name navigation-socialmedia is being used here to reference the CSS class we setup in the previous step.


      c) The margin-top, margin-left positioning will vary depending on the exact placement of your navigation bar. You will have to play around with this until you get yours placed exactly where you want it.


      d) The background url ‘images/wordpressLogo.png‘ represents where your image is saved on your computer (refer to step 2 if you are confused).


      It is always great when you can accomplish something for the design or functionality of your website without having to use a plugin. You can, of course, use this tutorial to help you place your social media icons anywhere on your webpage. You are not just limited to placing them in the navigation bar and will just need to make adjustments where necessary. One final thing to note, you will want to make sure to test the appearance and placement of your icons in all browsers and operating systems to ensure they look as they should.


      If you have any questions please leave a comment below or send an email to info@crunchsum.com. Thanks for stopping by!


      Is this your first time visiting the CrunchSum blog? Subscribe to future posts for more WordPress tips and follow @CrunchSum on Twitter.



      7 thoughts on “How to Add Social Media Icons To Your Navigation Bar in WordPress

      1. Hi. This works well except for one thing… the Navigation Label still appears, on top of the icon. I am using the TwentyTwelve theme. Is there any way to get rid of the label?

      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>