Comments on: Unobtrusive, cross-browser method to add icons to links

By: Michael van Laar

Michael van Laar — Sat, 31 Oct 2009 14:36:20 +0000

Tanks a lot for this great tutorial! I just discovered a little bug: If a link includes a line break, the position of the inserted icon is wrong. In the pure CSS version (for all browsers, except IE 6) this does not happen.

This is how it looks on a test page: http://www.michael-van-laar.de/fileserver/diverses/icon-bug.png (Picture 1: CSS method in Firefox; picture 2: Javascript method in IE 6)

Since I’m not very familiar with Javascript yet, I don’t have an idea, if and how this could be fixed. Any ideas?

By: Links mit Dateityp-Icons via CSS

Links mit Dateityp-Icons via CSS — Thu, 19 Mar 2009 16:58:48 +0000

[...] Wie üblich funktioniert das im IE6 nicht, es gibt aber Crossbrowser-taugliche Möglichkeit beispielsweise via jQuery. Interessierte finden dazu einen Artikel bei Rebecca Murphey. [...]

By: D

Wed, 31 Dec 2008 21:35:30 +0000

This is a great use of JQuery.

How would one go about getting this to work for mailto links?

Thanks!

By: Rebecca

Rebecca — Sat, 20 Dec 2008 01:23:43 +0000

@Aaron: after you’ve set $a, you can do:

if ($a.children(’img’).size()) { return; }

This will prevent the rest of the function from running, so the background image won’t be added.

By: Aaron

Aaron — Sat, 20 Dec 2008 00:26:28 +0000

What about if you have an image as a link? Will it add the icon next to an image? I am trying to find a solution so it does not add an image next to images that are links.

Thanks and great code!

By: Jake Rutter

Jake Rutter — Thu, 19 Jun 2008 02:22:47 +0000

This is a great use of jQuery for a very applicable script. Kudos to you!

By: Linklere Otomatik İkon | elektronik projeler devreler web grafik

Linklere Otomatik İkon | elektronik projeler devreler web grafik — Wed, 27 Feb 2008 18:27:56 +0000

[...] hemen denedim bir türlü olmadı sonrasıda aynı sitede bulunan linklerden uygulamanın html ve farklı örneklerine ulaştım dene dene yok olmadı sonrasında ilk yapmam gerekeni yaptım ilk sitede [...]

By: Automatic Link Icons v2.0 | Psyked

Automatic Link Icons v2.0 | Psyked — Tue, 08 Jan 2008 20:19:03 +0000

[...] are other ways than just CSS, however. Check out this post by Rebecca Murphey, “Unobtrusive, cross-browser method to add icons to links” – using javascript to get the same [...]

By: rdmey

rdmey — Mon, 07 Jan 2008 13:12:53 +0000

@James: There are a couple of downsides that I can think of: the fact that users without Javascript can’t see it, the weight of the Javascript (while the code to accomplish this isn’t any longer than the CSS would be, the jQuery library is bigger, and also requires another HTTP request).

That said, if you are already using jQuery on your page for something else (and more and more often, I am), that becomes less of a consideration. And there are a lot more people using IE6 than there are people without Javascript enabled, so I think the tradeoff there is fair.

By: James

James — Mon, 07 Jan 2008 11:39:21 +0000

Hey, this is pretty cool. It’s a shame pure CSS stylesheets can’t give you the flexibility this approach does. Are there any real downsides to using javascript for link icons?