Adding PDF icon to pdf links

Get Started
1

How do I add the little PDF icon automatically to all my PDF links in wordpress?

Here is the location of my image:

http://www.lushwebsites.com/images/pdf.png

and my current style code:

a.pdf { /*The background image*/
	background: url(http://www.lushwebsites.com/images/pdf.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px; /* To center the text vertically with the icon */
}

Do I need to add some jquery or something? Not really sure how to do that or where to link it?

Here’s some potential code, just not sure how to implement it…

$(document).ready(function() {
var fileTypes = {
  // extension: 'image file'
  doc: 'doc.gif',
  xls: 'xls.gif',
  pdf: 'http://www.lushwebsites.com/images/pdf.png'
};

// then, loop over the object
// using jQuery's $.each()
$.each(fileTypes, function(extension,image) {
  $('a[href$="' + extension + '"]').
    css({
      paddingLeft: '20px',
      paddingTop: '2px',
      paddingRight: '2px',
      background: 'transparent url("' + image + '") no-repeat center left'
    });
});

});
2

Easiest way to do it, with just CSS, is like so:

a[href$=".pdf"] {
  background: url(http://www.lushwebsites.com/images/pdf.png) no-repeat left center;
  padding-left: 20px;
}
3

Thanks,

It’s showing up like this, though… chopped off and weird:

http://www.backwardtracings.com/letters-missives/

4

At the moment your icon is about 82 x 91 px in size. You need to resize it to the size it will appear, such as 16 x 16 px. See attached.

5

Any way to keep it at current dimensions? I was hoping for a larger icon…

thx

6

Well, you’ll blow your design apart if you try to use an icon that size. You could do something like this:

a[href$=".pdf"] {
  background: url(http://www.lushwebsites.com/images/pdf.png) no-repeat left center;
  padding: 40px 0 40px 88px;
}

But that would be a disaster to lines of text above and below, which would overlap.

No, you can’t resize bg images with CSS, so the image has to be the right size from the start.

7

I just don’t get why I can’t use an image that’s bigger than 16x16… what am I missing?

I just want one of those big PDF icons, I’m sure you’ve seen them before…

Thanks for your help…

8

No, I have no idea what you are talking about. Do you want a little pdf icon next to your link or don’t you? What are you picturing here?

9

like this page, for example, has bigger icons. it’s just like… 16x16… that’s tiny.

10

If each link will be on a separate line like that, you can put a bigger line-height setting on the <p> itself, then make the image an appropriate size and allow appropriate padding.

The key is to save the icon at the size you want it to display—assuming you want it to be a background image. If you are hand coding these links, you can just place the image in the HTML itself. Up to you.

Anyway, if you have Photoshop or similar, just use Save for the Web and set it to the appropriate size.

11

cool, thanks.

Yeah, it’s for someone else so I gotta automate it.

Thanks again for your help.