8 November 2016

Add a document icon to document links

Here’s a simple cross-browser compatible way to prepend an icon to any document links using jQuery.:

JavaScript
1
2
3
$("a").filter(function(){
   return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|slxs|epub|odp|ods|txt|rtf)$/i);
}).before('<span class="doc-icon glyphicon glyphicon-file"></span>');

The regex expression \. looks for anything after a ., and the i flag makes it case insensitive.

Works fine in earlier version of IE.

Working example.