Add icons to your links automatically using jQuery & CSS – Cool Javascripts By Ethical Swinger Coders

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects. One of project which we support is https://allswingersclubs.org/ - pls, support it either - visit it, comment, add your clubs.

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.