fixedicons


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.

<div id="fixed_icons">
    <a href="http://twitter.com/vanweerd" id="twitter" title="Follow us on Twitter"></a>
    <a href="http://www.facebook.com/ronaldvanweerd" id="facebook" title="Facebook Profile"></a>
    <a href="http://nl.linkedin.com/in/vanweerd" id="linkedin" title="LinkedIn Profile"></a>
    <a href="http://feeds.feedburner.com/VanWeerd" id="rss" title="RSS feed"></a>
</div>

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.

#fixed_icons {
    background: transparent;
    width: 48px;
    position: fixed;
    top: 15%;
    right: 0.20%;
}

#fixed_icons a {
    display: block;
    text-indent: 24px;
    height: 48px;
    padding-bottom:3px;
    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:

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.

Enjoyed this article?

Stay up to date, and subscribe to my RSS feeds to receive tips, tricks and news by e-mail!