Using Attribute Selector to display icons

[Michael Steffel]

Hello,

I am looking for a way to display file type icons dynamically on our site.  We use WordPress and Drupal as CMS's for our main and sub-domain sites.  Currently we are using Icomoon on our main site (Drupal) by inserting a <span> tag after each file (mostly PDF's and Word files) within our site.  However, we have noticed that some users forget to add the Span even though we have made this a click within the CMS admin interface.

What we are looking to do is something like what we have done on a couple of our blogging sub-sites using WordPress. We currently use a bit of CSS using Attribute Selectors (see below) to display the correct image of the PDF/Word icons. However, it would be nice to display these using our Icomoon Font.

a[href$=".pdf"] { background: url(i/icon-pdf.png) left center no-repeat; padding-left:1em;} 

a[href$=".doc"] { background: url(i/icon-doc.png) left center no-repeat; padding-left:1em;}

 Is there a way to use CSS, and our Icomooon font to simply look for file extensions in links, and append the icon to the link? We are also using Jquery on all our sites if that helps.

Thanks for any help you can give.

Mike