Adding An Image Or Icon To Links

Posted under:
November 13th, 2008

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

Related Posts

6 Comments

  1. Comment by: Ryan McLean

    This is a really great idea. I have never seen any blog ever do this. Usually the link will say if what you are clicking on is a pdf file. But this is a great idea none the less

    Ryan McLeans last blog post..Could Advertising Be Harming Your Website?

  2. Comment by: Adam

    Jarret,

    This is a great tip. I never thought of creating an link class that inserts the image for me. I always sit there and add the image to every link in my html which now seems like a pretty bonehead move.

    Thanks. :)

    Adam

    Adams last blog post..Danny Cooper’s - Blog Comment Blueprint

  3. Comment by: Creadiv » Blog Archive » How To Make Money By Creating Wordpress Themes.

    [...] love - Jarret Cade recently made a great post about how to easily add images to links to make them a little more user [...]

  4. Comment by: Dennis Edell

    Very cool! This might even be something I can do. LOL

    Dennis Edells last blog post..We Will Stay Do-Follow, But…

  5. Comment by: Normal Joe

    Wow, that’s one sexy link man! I like it…and you laid it out so simple for us non coders! Thanks dude.

    Normal Joes last blog post..Transform Your Thinking-If You Had THIS You’d Be Successful

  6. Comment by: TheMoneyac

    Looks really interesting, and since I have very hard times with HTML codes, this is something I could actually make to work.

    Cheers,

    The Moneyac

    TheMoneyacs last blog post..Looking good…

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.