Geek Answers Handbook

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

I use padding + background-image to place the icon next to the link.

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

  <a class="external" href="http://www.othersite.com/">link</a> a.external { padding-right: 15px; background: transparent url(images/external-link-icon.gif) no-repeat top right; }

But most browsers do not print a background image, which is annoying.

What is the standard for placing an icon next to links, which is semantically correct and works in all cases?

EDIT

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

 a.test:after { padding-right: 5px; content: url(../pix/logo_ppk.gif); }
+6
css
source share
2 answers

I personally placed it and put the background image through the CSS class (just like your example). This is by far the easiest way; it keeps the document light and meaningful.

If the print really matters (and I really mean it), insert the real image there, but remember that it does the markup from the semantic aspect.

Perhaps the best compromise would be a printable version that uses images instead (either using some kind of server size, or some kind of JS that replaces the CSS class with the actual image.

+3
source share

Although OLi speaking in the css icon is the best method, there is no way to print css backgrounds. (until you turn on css background printing from your 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 an inline image for the link.

0
source share

More articles:


All Articles