Add icons to links using jquery

If you want to add icons besides your hyperlinks, jQuery can be used to do it as shown below

1. Define Syles

a.pdf { 
    background: url(images/pdf.png) no-repeat left center;
    padding-left: 20px;
    line-height: 16px; /* used to center the image with text */
}
 
a.txt { 
    background: url(images/txt.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;
}

2. Add the style using jQuery DOM ready or pageLoad

$(function() {
 
    $("a[href$='.pdf']").addClass("pdf");
 
    $("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
 
    $("a[href^='mailto:']").addClass("email");
 

});

Cheers,

Samitha