Add icons to your links automatically using jQuery & CSS

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

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 :)

  1. Icon Look – http://www.iconlook.com
  2. Icon Let – http://www.iconlet.com
  3. Icon Finder – http:www.iconfinder.net

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)

Related posts:

  1. Vertical alignment of contents inside an element using jQuery
  2. Building a reusabe font size controller interface using jQuery
  3. Make curved corners with jQuery Corner plugin

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

Comments

15 Responses to “Add icons to your links automatically using jQuery & CSS”
  1. ben says:

    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.

  2. Janckos says:

    Excelente recurso.

  3. rtpHarry says:

    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 :)

  4. still seems to have errors when the link goes to multiple lines in IE 7 email me and ill show you

  5. advise-art says:

    why not …. can be useful ….

  6. Great resource

    Congratulations.

  7. seishin says:

    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”);

  8. nate says:

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

  9. sabo says:

    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.

  10. sabo says:

    oh, silly me. i got it. forget that i said anything :)

  11. Please try FindIcons.com, a much better icon search engine.

  12. tdastheday says:

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

Trackbacks

Check out what others are saying about this post...
  1. [...] 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. [...]

  2. [...] 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. [...]

  3. [...] Add icons to your links auto­mat­i­cally using jQuery & CSS | Cool Javascripts. Shar­ing is Caring:ShareStum­ble­UponRed­ditDiggEmailPrint This entry was posted in Odds & Ends, Tools and tagged icons jquery javascript, jQuery tutorial designers. Bookmark the permalink. ← Open Source Social Networking Platforms [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!