By popular demand, here are instructions to add icons to your site that will stick to the sidebar, even when scrolling up or down the page. Inspired by various resources that I found on the web, I’ve tried to put together a set of instructions that will make this as easy as possible.

The result will look like this (except in IE6, which will mess up).

These are the ingredients that we need to achieve this:

Icons that you would like to display

First of all, you need to pick a set of icons that you wish to display, these can be social icons, or, as seen on the iThemes website, icons linking to other sites, or any icons you wish to use. Make sure all icons have the same dimensions, and make sure that the icons you download are free to use, or if you have to make an attribution to the designer (which is always a good thing).

For the sake of this tutorial, the icons (in this case 48px by 48px) are stored in a subfolder images/icons/ in your theme folder.

HTML code that will display the icons, and will link to the required locations

The html code to display the icons, and make sure they link to the proper location is straightforward. Preferably, the code is added right after the opening <body> tag, that can usually be found in header.php.

In this example, 4 icons will be displayed linking to my twitter, facebook and linkedin profile, and a link to the RSS feed of my site.

[php] <div id="fixed_icons">
<a href="" id="twitter" title="Follow us on Twitter"></a>
<a href="" id="facebook" title="Facebook Profile"></a>
<a href="" id="linkedin" title="LinkedIn Profile"></a>
<a href="" id="rss" title="RSS feed"></a>

Note that the code is wrapped in a div container, that we will use in the CSS, and note the id’s added to each link. This id will be used by the CSS code to display the appropriate icon.

CSS code that will make sure the icons stick to side of the site

Finally, you need to add the following code to the stylesheet. The first two selectors make sure that the icons are fixed to the side of your side. The lower part will make sure that the proper icons are displayed for each id used in the hyperlink in the HTML code.

[css highlight=”5,6″] #fixed_icons {
background: transparent;
width: 48px;
position: fixed;
top: 15%;
right: 0.20%;

#fixed_icons a {
display: block;
text-indent: 24px;
height: 48px;
text-decoration: none;

#fixed_icons #twitter { background: url("images/icons/twitter.png") no-repeat; }
#fixed_icons #facebook { background: url("images/icons/facebook.png") no-repeat; }
#fixed_icons #linkedin { background: url("images/icons/linkedin.png") no-repeat; }
#fixed_icons #rss { background: url("images/icons/feed.png") no-repeat; }

Using this code as a starting point, you can finetune and tweak the icon positions using the highlighted lines:

[css] top: 15%;
right: 0.20%;

the top property specifies how far from the top of the page the icons will be displayed, the right property will stick the icons to the right site, leaving a 0.20% gap. Changing right to left will obviously move the icons over to the left side of the site.

I hope you enjoyed this, and that the instructions are clear, leave a comment if you wish to show off your implementation!

In a followup article, I will explain how you can apply all these changes without modifying any theme files other than the functions.php file.


  1. Howard Olsen

    Hey, that’s a great tip. I’m a motivational speaker and sales trainer …. certainly not a coder or developer and that worked like a charm! Just would love to know how to create hover effects with this sidebar trick.


    1. Ronald


      to add a hover effect, create hover images, based on the existing (add a bit of shading, or highlighting) and simply add the following lines to the css,

      #fixed_icons #twitter:hover { background: url(“images/icons/twitter_hover.png”) no-repeat; }
      #fixed_icons #facebook:hover { background: url(“images/icons/facebook_hover.png”) no-repeat; }
      #fixed_icons #linkedin:hover { background: url(“images/icons/linkedin_hover.png”) no-repeat; }
      #fixed_icons #rss:hover { background: url(“images/icons/feed_hover.png”) no-repeat; }

      that should do the trick,

      1. cody

        Hey Ronald, I am not sure if I am doing something wrong but I’m 99% sure I’m doing it right and when i hover over the images they just disappear ? Is there some code I need to add in the header file ?

        Thank You,


          1. Matthew Engelhart

            Sorry, I spoke before I should have, I’m having the same troubles.

          2. Ronald

            What is the URL to your site? I could have a quick peek for you.

          3. Matthew Engelhart


            Ronald, Im sorta at my whits end with this, I’m running a Nuke Evolution Xtreme site, and have it sort of working, but when u view my site in IE (Internet Exploror) it breaks the page, but fine in chrome and firefox. Also, im having trouble doing the mouse over effects. Id be glad to pay you to fix this the way I need it. Im going for the facebook Like and Google + like u see here on this site:

            And the fixed icons right where they are but working with IE.

            Please email me or call me so we can work something out.


  2. Craig Brugger

    Hey Ronald, I just wanted to thank you for this excellent tutorial. I’d looked in the past for a step by step guide for implementing the icons, but hadn’t found anything until I came across this. You made it seem so easy. In fact, I even got the code working on my phpbb forums as well. Thanks!


  3. Rick Knox

    Hey Ron,

    This is great and I am attempting to use this in another way – hope you can help.

    on the site you’ll see two sets of social icons, one below the logo and the one I am attempting to add as an “absolute” vs “fixed”. The reason I am doing this is because the when you view the site in IE it squishes up the icons with the way i originally did this.

    So here is what I am trying to do – I would like to line the icons up side-by-side instead of on top of each other. Then use either padding or margin to place the icons over the set that is currently under the logo. Once I get everything lined up – i’ll delete the old ones.

    I have tried the following css display types:


    and I can not get the icons to go horizontal?

    Any help would be appreciated!

    1. Ronald

      Hi Rick,

      here’s my (!) simple solution to fix the IE6 issue:

      <!––[if lte IE 6]>
      <style type=”text/css”>
      #fixed_icons { display:none; }

      so the 2% of die hard IE6 users that visit my site won’t see the icons. Tough.

      Anyway, there’s no easy fix to your CSS, but note that 10em is huge! More here:

      Adding display: inline; on the fixed_icon div selector lines them up horizontally, but there are huge gaps. Maybe it helps you though.

      1. Rick


        I do not think I explained my situation clearly (my bad).

        I wasnt looking for a fix to the IE6 issue – I was looking to replace the current horizontal set of social Icons with a modified solution that you blogged about above.

        It looked simple enough for me to do, but the problem is – when you visit you see your modified version is listed vertically in the top left – the ones i am going to delete run horizontally before the Capstone logo.

        What I would like to do, is make the vertical ones horizontal, then move them below the capstone logo… once i have this completed – I will delete the old horizontal ones

        I know I should have probably placed this in the support forum – but when I saw your above solution, I thought it may be easier to communicate here.

        Sorry for any confusion

  4. Dale

    Hi Ron – I’m in the process of redoing a site using Builder and when I implement the above instructions the icons appear in the upper left corner of the site. For Builder does the html code still go in the header.php file or somewhere else?


    1. Ronald

      Hi Dale,

      it doesn’t really matter where you add the code, as long as the html code is anywhere in between the and tag, and the css code is in your stylesheet. In Builder you can’t use the header.php, since the opening tag is not in that file. You can add an html module to add the code.


  5. Amy… my question didn’t post, I apologize if this ends up a duplicate. This solution looks fine in Firefox but not in IE 8 (it makes the Builder theme whack out). Also my ‘hovered’ image is uploaded properly, however instead of the ‘hover’ image, there is no image.

  6. Amy

    I was loving my new little icons to the side and just realized that they are gone… the only two plugins that I’ve added were SexyBookmarks & W3 Total Cache. I did some optimizing and added stuff to the .htaccess but I’m not sure when they disappeared. Admit it, you were jealous and stole them back… 😛

      1. Amy

        I disabled them for an entire day and they didn’t come back. I had added Google analytics in the footer with it, and I also took that out for a few hours, they didn’t come back. I haven’t touched the code at all. It is the same code as in (where I put them originally to test).

        1. Ronald

          Amy, on your request, I have reversed the order of the comments. Hope this works better for you. It actually makes more sense to me as well 😉

          1. Amy

            Thank you for the offline help… adding it to the functions.php instead worked. Yeah!

          2. Mark Loventhal

            This seems super simple for an html site, but I am trying to implement this using Builder with a child theme.


            1. Which style sheet do I add the css code to? With Builder and child themes and the Builder style manager, its confusing.

            2. What syntax do I use to put the html in the functions.php file? Does it go at the beginning or the end?

            Please help.


  7. Mark Loventhal

    Please help… one more request

    Mark says:
    September 24, 2010 at 03:39

    This seems super simple for an html site, but I am trying to implement this using Builder with a child theme.


    1. Which style sheet do I add the css code to? With Builder and child themes and the Builder style manager, its confusing.

    2. What syntax do I use to put the html in the functions.php file? Does it go at the beginning or the end?

    Please help.


    1. Ronald

      Hi Mark,

      1. in Builder, add the CSS code to the child theme’s stylesheet style.css. You should not use the Stylemanager since this is not native Builder code.

      2. there is no need to modify functions.php, As I stated in an earlier reply, you can add the code to an html module and add that to your layouts.

      Or if you want to use a function, check out my other post on how to add a full width header and footer which has an example of how to insert code in Builder using functions.php.

      hope that helps,

  8. Mark Loventhal

    I am still failing to get this to work. My only guess is that there is an overflow:hidden; somewhere making it disappear.

  9. Leah

    I added this trick to the itheme addington theme & noticed 1 issue. The icons would scroll under the header & footer unless I changed the “top: 15%; ” to some ridiculous high number like 65% & added a bottom percentage of 75%.

    Solution: I added a z-index value of 100%. It works great now! Thanks for the neat trick.

  10. Bob Randklev

    Thanks Ronald for the great code and inspiration.

    I had some troubles with bad characters when I copy/pasted the code but finally found the problem.

    I used 32px and 64px icons so when you hover the icons grow in size!

    Check it out at:


  11. Amy

    Since I am new to Builder, exactly how do you add an HTML module to a layout?

  12. Lou Anne McKeefery

    I’d like to use the technique you have on the right of this page. Upon scroll the box opens for content. Are the instructions the same just use the hoover code in the comments area?

    Thanks for the great tips.

    1. Ronald

      Hi Lou Anne,

      for the slide out boxes on the right, I used this technique, and merged it with the WordPress related posts plugin. I’ve made it into a plugin for myself, but not one that is ready for distribution.

      1. Brian Miles

        Do you think this can be a plugin offered at in the near future? Where you can add content and your own icons?

        It is just such a cool feature and makes your website look great!


  13. Leigh

    I am working on a site mock-up using Builder. This has helped out so much! However, I put a larger icon at the top (ie. Follow us), and I would like the following icons to be centered underneath (i.e. facebook icon, etc.). How would I do this?

    Thank you!

  14. Stefano

    Good morning,

    How can I put a laterla sidebar as in the right in this website.

    Look forward to hearing from you soon,


  15. Antwan Shalom


    I followed your tutorial but I don’t know why… It still doesnt work…

    Here are the codes I added :




    #fixed_icons {
        background: transparent;
        width: 48px;
        position: fixed;
        top: 15%;
        left: 0.20%;
    #fixed_icons a {
        display: block;
        text-indent: 24px;
        height: 48px;
        text-decoration: none;

    #fixed_icons #facebook { background: url(“wp-content/uploads/2012/02/FaceBook_48x48.png”) no-repeat; } 
    #fixed_icons #twitter { background: url(“wp-content/uploads/2012/02/Twitter_48x48.png”) no-repeat; }
    #fixed_icons #soundcloud { background: url(“wp-content/uploads/2012/02/Soundcloud2_48x48.png”) no-repeat; }
    #fixed_icons #YouTube { background: url(“wp-content/uploads/2012/02/Youtube_48x48.png”) no-repeat; }
    #fixed_icons #Hypemachine { background: url(“wp-content/uploads/2012/02/heart-100.png”) no-repeat; }
    #fixed_icons #rss { background: url(“wp-content/uploads/2012/02/Feed_48x48.png”) no-repeat; }

    Is there something wrong ?

    Thank you for your help !

  16. Thomas Brambor

    Excellent tutorial! I found some great icons at They added correctly to the right side of the page but for some reason the links I added do not work (i.e. the buttons are not linked). Any idea what I could be doing wrong?

    1. Thomas Brambor

      Apparently I had some overlapping divs that prevented the links. Your description was great. Thanks again!

  17. Buddy

    Thanks for this great help. I got it working fine in Firefox but cannot get it to work in Chrome or IE9. Do I need to do something different for them?

    1. Buddy

      z-index value of 100%, added this and it works in Chrome, but I still can’t get it to work in IE 9

      1. Ronald

        Hi, z-index doesn’t take a % value, only integers, so in case you added 100%, change it to 100. Perhaps that helps.

Leave a Reply