Add icons to your links automatically using jQuery & CSS

January 12, 2009 by admin · 14 Comments
Filed under: Tutorials, jQuery

You want to show a particular icon to a particular type of link. For eg: a pdf icon to all pdf file links, a text document icon to all text document links, zip icon to all links that are linked to zip files etc.

Why jQuery?

Yes, it is not that difficult with css. Just declare some classes and give background images then assign that class to the links as required. Then why we need jQuery. The answer is, for simplicity. Who ever entering the content should be cautious to add the right classes for the right links. Also adding classes are difficult in a blog platform – you will need to switch to HTML view instead of the editor view.

Using jQuery we’ll make sure that the right icon is showing for a particular link.

Step 1 – Find the right icons

Getting a free icon describing your file type is easy. You might need to search for free icon sets, or better search in any of the three following icon search engines. For eg: search for the term “pdf” and you will see a lot of images in different dimensions, select the one that suits your need. Just make sure you’re not using a copyrighted icon

Here I am using five icons – One for pdf files, one for txt documents, one for zip files, one for email links and one for external links. You may add any number of icons for any file type as I am going to describe in the next sections.

I’ve selected icons of 16px in size because it look better in content. If you need large icons, you will need to use the css display:block property.

CSS styles

Now we’ve have the right icons. Now we need to add classes with background image.

a.pdf { /*The background image*/
	background: url(images/pdf.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px; /* To center the text vertically with the icon */
}
 
a.txt { /*The background image*/
	background: url(images/txt.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.email {
	background: url(images/email.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.external {
	background: url(images/ext_link.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}

Eg:

 
.download a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	height: 48px;
	padding-left: 55px;
	line-height: 48px; /* Center the text vertically with image */
	vertical-align: bottom; /* to align the text with image bottom, line height property required */
	display: block; /* Need this to show the images fully */
	float: left; /* You might need this as well for aligning it with the parent element */
}

JQuery

Now, we can write the jQuery statements.

$(document).ready(function() {
 
 
	// Add pdf icons to pdf links
	$("a[href$='.pdf']").addClass("pdf");
 
	// Add txt icons to document links (doc, rtf, txt)
	$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
 
	// Add zip icons to Zip file links (zip, rar)
	$("a[href$='.zip'], a[href$='.rar']").addClass("zip"); 
 
	// Add email icons to email links
	$("a[href^='mailto:']").addClass("email");
 
	//Add external link icon to external links - 
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external");
	//You might also want to set the _target attribute to blank
	/*
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external").attr("target", "_blank");
	*/
});

For determining the links, we’re using jQuery’s attribute syntax. For eg: To identify PDF links, we check whether the href attribute ends with a ‘.pdf’ extension.

To find external links we’ll compare the anchor tag’s host name with the location host name

Do not copy paste from the above code. It is formatted for viewig. Please download the full source code at the end

demo
It will look like the below image. For an actual demo check the below links.

Demo & Download
Demo
Download full examples (24 KB)

If you like this post, please share it so that others can also find this

Digg Delicious Stumble Reddit Technorati

Comments

14 Responses to “Add icons to your links automatically using jQuery & CSS”

ben says:

February 10, 2009 at 2:24 pm

Thanks for this great resource. I have one issue that I can’t seem to solve. What if I am using several subdomains and don’t want them displayed as external links. In that case, it seems, the code for the hostname match would need to be altered – but I can’t get it to work. Any ideas would be greatly appreciated.
Janckos says:

February 26, 2009 at 3:51 pm

Excelente recurso.
rtpHarry says:

March 3, 2009 at 2:50 pm

Hey, I made css do this years back when it was first supported but it still isnt available in most browsers. jQuery is a good way to get this going right now instead of waiting for css 2.1 selectors to be fully supported!

But the real reason I am posting its to say thanks for those three icon search engines! Great resources, I didnt realise that kind of site existed.

Very valuable resource
Casey Becking says:

March 6, 2009 at 4:45 pm

still seems to have errors when the link goes to multiple lines in IE 7 email me and ill show you
advise-art says:

March 12, 2009 at 1:32 pm

why not …. can be useful ….
Ney Estrabelli says:

May 12, 2009 at 12:04 pm

Great resource

Congratulations.
seishin says:

July 21, 2009 at 8:12 am

your css could be shortened:
a.icon {
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
line-height: 16px;
}
a.pdf { background-image: url(images/pdf.png) ;}
a.txt { background-image: url(images/txt.png) ;}
and so on…

then:
$(”a.icon[href$='.pdf']“).addClass(”pdf”);
or
$(”a[href$='.pdf']“).addClass(”icon”).addClass(”pdf”);
nate says:

August 14, 2009 at 4:11 pm

this is a great script. thanks so much for posting! awesome
sabo says:

December 29, 2009 at 1:43 am

how about adding this posibility to one specific class, instead of entire site? for example, i would like to have this effect within my articles, but i don’t want it all around because it will mess up my page.
sabo says:

December 29, 2009 at 2:26 am

oh, silly me. i got it. forget that i said anything
FindIcons.com says:

May 4, 2010 at 11:17 am

Please try FindIcons.com, a much better icon search engine.
tdastheday says:

June 28, 2010 at 7:03 pm

How do I exclude this from my div class=”content” section?

Trackbacks

Check out what others are saying about this post...

25 Powerful and Useful jQuery Tutorials for Developers and Designers : Speckyboy Design Magazine says:

March 11, 2009 at 11:29 am

[...] Add icons to your links automatically using jQuery & CSS Demo URL : View Demo. Description : You want to show a particular icon to a particular type of link. For eg: a pdf icon to all pdf file links, a text document icon to all text document links, zip icon to all links that are linked to zip files etc. This tutorial will show you how using jQuery. [...]
25 Powerful and Useful jQuery Tutorials for Developers and Designers | guidesigner.com says:

March 12, 2009 at 11:12 am

[...] Add icons to your links automatically using jQuery & CSS Demo URL : View Demo. Description : You want to show a particular icon to a particular type of link. For eg: a pdf icon to all pdf file links, a text document icon to all text document links, zip icon to all links that are linked to zip files etc. This tutorial will show you how using jQuery. [...]