Styling links with icons and CSS

One of the most common web design techniques is to add small icons next to hypertext links to give the user some visual indication of what the link does. A common example is to put an envelope next to an email address. There are a few ways of doing this, and with a bit of attention to detail, you can achieve a very nice effect. Let’s look at the most basic way of doing this first:

<a href="mailto:you@yourdomain.com">
   <img src="/images/email.jpg" alt="contact me" />
   you@yourdomain.com
</a>

The result, without any style:

Clearly the text needs coloring. A slight tweak in the css give us a color palette that is a bit more pleasing and a simple rollover effect:

a:link, a:visited {
   color:#399DCF;
   text-decoration:underline;
}

a:hover, a:active {
   color:#333;
}

As you can see, the image and the text aren’t quite lined up vertically, and and in non-IE browsers it looks a bit sloppy with the underline extending underneath the icon. In order to correct these problems, let’s change the markup to remove the image tag and add a class to the anchor tag:

<a href="mailto:you@yourdomain.com" class="email-link">
   you@yourdomain.com
</a>

The rest is handled by CSS. We give a little padding to the link so the entire icon is visible and and fill the space with a background image that is vertically aligned in the center of the line.

a.email-link:link, a.email-link:visited {
   padding:2px 0 2px 20px;
   background:url(/images/email.gif) left center no-repeat;
   color:#399DCF;
   text-decoration:underline;
}

a.email-link:hover, a.email-link:active {
   color:#333;
}

We now have a clean rollover underline effect and a link with a clickable icon that is aligned properly.