What is the standard way to add an icon to a link with CSS?

Question

I'm used to use padding + background-image to place an icon next to a link.

There are many example of this approach. Here is one from here:

 <a class="external" href="http://www.othersite.com/"&gt;link&lt;/a&gt;

  a.external {  
     padding-right: 15px;  
     background: transparent url(images/external-link-icon.gif) no-repeat top right;  
 }    

But most browser don't print background image, which is annoying.

What is the standard to place icon next to links which is semantically correct and works in all cases?

---

EDIT

What about CSS :before and :after? Is it a recommended practice?

a.test:after {
    padding-right: 5px;
    content: url(../pix/logo_ppk.gif);
}

Answer 1

I'd personally pad it and put a background image via a CSS class (just like your example). It's by far the lightest route, it keeps the document light and semantic.

If printing them really matters (and I do mean really matters) stick a real image in there but be aware that it does screw up markup from a semantic aspect.

Perhaps a better compromise solution would be to have a "printable version" which uses images instead (either by something server-size or some JS that replaces the CSS class with an actual image.

Answer 2

Although as OLi saying keep icon in css is best method and there is no way to print css backgrounds. (until you turned on css background printing from browser settings).

but if you can use javascript then this method will work for you

http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links

you can add inline image to link.