Solution:
This can be done with just CSS and it supports all major browsers including IE7+. There is no need to add any extra classes or <img>
elements.
The CSS below will target any link to a .pdf
, change the link color, give it some left padding and apply a background image in the space created:
a[href$=".pdf"] {
background: url(images/pdf-icon.png) no-repeat 0 50%;
padding-left: 25px;
color: red;
}