Adding An Image Or Icon To Links

Ever been browsing around on a site and notice that their outbound links or certain links have that small image to the right of the links? I’ve always thought this was a neat little way to inform your readers of outbound links or say if the link was to a PDF. By adding an image to the link you can prepare your visitors ahead of time so that they can be prepared to wait 100 years for a PDF file to load up.

First things first we need our image.

Oooooo, super exciting yes? Ok, so now that we have our image all that we have to do now is give our link a special class and then setup the code in our stylesheet.

For sake of simplicity lets just give our image a class of imagelink.

<a href=”/” class=”imagelink”>Link</a>

Now, lets go inside of our stylesheet and add the appropriate code.

.imagelink {

padding-right: 20px;

background: url(‘imagelink.jpg’) right no-repeat;

}

The padding-right: 20px; will create a space 20 pixels wide to the right of the end of the link. The background part broken down; url(‘imagelink.jpg’) is the URL to whatever image you want to use, right aligns the image all the way to the right and no-repeat keeps the image from repeating more then once.

So with it all said and done you should have a link that looks like this