You can use CSS attribute selectors to accomplish this without changing anything in the WP Admin or the HTML. A Google search for “css file type icons” comes up with several results, but I’ll explain the basic idea for you here.
An attribute selector lets you style any html tag with a matching attribute. There are many ways to use attribute selectors (input[type="text"], anyone?) but you need to grab the href value, particularly the file extension. For example, if you want to add a pdf icon before any pdf files, you could do something like this:
a[href$=".pdf"] {
background:transparent url(../images/pdf-icon.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}
The $ means that you’re matching from the end of the string. This will work on all modern browsers, and even on IE7.
If you want to be extra-fancy, you could put all your icons in one image file, then use background positioning to get each one correctly adjusted:
a[href$=".pdf"], a[href$=".doc"], a[href$=".zip"] {
background:transparent url(../images/pdf-icon.png) no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}
a[href$=".pdf"] { background-position: center 0; }
a[href$=".doc"] { background-position: center -20px; }
a[href$=".zip"] { background-position: center -40px; }
EDIT: (Thanks to @toscho!)
An even more fun trick is to add the icon as content: url(image.gif) rather than a background-image. That way you can control height & width, create more compact icon-sprite images, or even do fun things like using fonts for icons.
a[href$=".pdf"]:before {
content: url(path/to/image);
// more styles //
}
Take a look at IcoMoon custom icon font creator (free!) for an easy implementation.