How to apply icons to links using css?

Question

i was wondering how can i add images to links with css that is compatible across FF, IE and Opera browsers?

Answer 1

Add a background-image to the link.

You can use margins, padding, and background-position to change where your background image is displayed.

Answer 2

a {
   display:block;
   width:10px;
   height:10px;
   background:url(/images/image.png) 0 top;
   padding-left:5px
  }

Background-position your x coordinate at 0 and then pad the left side of the a tag

Answer 3

Set the background to your link icon and the padding to the width of your icon.

a { 
   padding-left: 10px;
   background: transparent url(link_icon.png) no-repeat center left;
}