Add content type icons to your links on the fly

Of course, there are simple and tedious ways to do this, such as:

HTML

<a href="test.pdf" class="pdf">Download PDF</a>


CSS

.pdf { background: url('/src/img/icon-pdf.png') no-repeat; padding-left: 20px; }


But, what a pain to have to do that for each link in your entire site!

With a touch of jQuery, you can take the markup right out of the picture:

HTML

<a href="test.pdf">Download PDF</a>

CSS

.content-type { padding-left: 20px; }
.content-type-pdf { background: url('/src/img/icon-pdf.png') no-repeat; }


jQuery

$('#content a').each(function() {
    fileExtension = $(this).attr('href').split('.').pop();
    if (fileExtension.length > 1)
        $(this).addClass('content-type-' + fileExtension).addClass('content-type');
});


Note: We have used the content parent ID in this case, to specify that we only want links within the content are of our site to be affected. You can remove this ID or replace it with your own.