CSS & Icons: Automatic for the People

Here’s a little tip that can save you some time and money. I received a request today from a client of ours to add a small PDF icon to a downloadable PDF on their website. “No problem,” I thought at first, but then it occurred to me, “What would happen if there were more than one PDF on the site? Wouldn’t it be weird if this is the only PDF with an icon?”

So after a quick Google search for “Automatic icons with css” I followed the top hit, Automatic Link Icons v2.0, a blog post with a set of step by step directions to do exactly what I was looking for; adding this icon to every PDF file in the site without having to go back through and recode hundreds of links. The most amazing part? This works without changing any HTML code within the site. So I figured I’d give it a shot. All you need to do is add a simple style to your style sheet, upload the icon of your choice and Voila! You’re done!

First I’ll show you the code, then explain how it works.

a[href$='.pdf'] {
display:inline-block;
padding:2px 15px 2px 0px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(images/icons/pdf.gif) center right no-repeat;
}

For anyone familiar with CSS, you’ll notice this looks pretty standard. However the first line, the selector, that’s where the magic happens.

a[href$='.pdf'] {

This is actually a conditional statement that will find all the links in your site ending with a .pdf file extension. That’s the beauty of it. Now that we have only .pdf files selected we have the ability to style those using CSS anyway we see fit. This is allows us to seek out and find every instance of a PDF file within the site like the find and replace function in Microsoft Word. Imagine all the brain cells saved by not spending hours upon hours relabeling every link to a pdf class=”pdf”. This is the perfect retro-fit!

And it is not limited to PDF files either. You can add icons to: mailto’s test@email.com, RSS Feeds, even Zip Files. Your options are only limited to your imagination and your CSS coding techniques!