PDF icon with pdf upload

https://www.adobe.com/misc/linking.html

ok its seems as if i can use the PDF icon according to their terms, any tips on how i can do this?

Download the small PDF icon here:
https://www.adobe.com/misc/linking.html#producticons

Save it to your hard drive and upload it to the /images directory of your theme.

In your stylesheet, create a class:

.pdf {
     background-color: #fff;
     background-image: url(images/pdficon_small.gif);
     background-position: bottom left;
     background-attachment: scroll;
     padding-left: 20px;
)

The left padding allows some air between the image and the link text, since the image is 17×17 pixels.

When you want to link to a pdf file, just do this:

<a class="pdf" href="https://yourcoollink.com">Your Cool Link</a>

That should do it!

this is how I used the icons creating this site

https://ndphklb.ca/?page_id=16

Why? That’s kind of a klunky way to do it. For one thing, there’s no need to link to the image as you have done there. And in any case, if all the file links on the page will be PDFs, there’s no need for a PDF anchor image for each link. You can just put a blurb in your intro paragraph that says the newsletters are in PDF format and offer the link to download the free reader. Less clutter on the page. The technique I posted above works better when there are links on the page that are a mixture of doc types. ??

thanks for your replys, basically im setting it up so a user can upload the PDF newsletters as attachments to posts, this has to be simple and automated so the user doesnt have to think about code.

Assigning the class sounds a good idea but i suppose it means the user has to enter HTML and my users wont have a clue about that.

4K how did you do it on your site? what you have done is sort of what im trying to achieve but with posts.

ta all.

Well if you dispense with the class code and just do what my other recommendation was, and that is to just note that all the links are to PDF files, which you need Adobe’s free reader to view and print, then you really don’t NEED that icon next to each link, do you? And your users don’t have to enter anything but the link itself. Doesn’t get more simple than that.

Not sure why the crankiness but I did it that way because most of the site users are older and as unnet savvy as you can get. It clearly defines each link and reminds them that it is a pdf.

I offered simply as a one way it can be done. No doubt yours is way superior and I bow to your uber knowledge.

I wasn’t being “cranky;” I was just asking why. I guess a lot of folks aren’t used to being questioned about things, but if you had a reason for doing it that way, I just was curious about it. I didn’t mean to appear cranky — when I’m cranky I look like this:
https://www.powhatananimalhospital.com/disease/rabid%20dog.jpg

… and I’m sorry if you misapprehended me.

sorry for the misunderestimating. ??

You’re lucky I didn’t see this earlier: “I offered simply as a one way it can be done. No doubt yours is way superior and I bow to your uber knowledge.” ?? Now personally, I think that’s snarky and kinda mean spirited, especially given the fact that all I was trying to do was show you a different (not necessarily BETTER, that’s up to YOU to decide) way of doing it. But .. whatever. ??

There are as many ways of writing code as there are people to write it.

All ideas are welcome!

Yes the point in the PDF icon is to make it clear what the file is withouth having to write PDF file etc next to the link.

Ive found this:
https://reidbeels.com/posts/2006/10/attachment-list-plugin/

I need to look at it more but currently it’ll display ANY attached file img/doc/pdf etc as what appears to be an attachment with a post with an icon, i need to customise it so it only applys to PDFs and DOCs.

Yep. I’d forgotten about that. I took a peek at this plugin and it appears that the attachments are driven by the stylesheet. So if you comment out the doc types you don’t want, you should be okay. Worth a shot. Experiment on a *copy* of the CSS file of course. Or actually, it’s trigged by what kind of file you upload, so if you never upload an actionscript file or WordPerfect file, it won’t do anything. Make sense?

Ah i see i guess you are looking here:

.attachment_list .zip a, .attachment_list .gz a, .attachment_list .gzip a, .attachment_list .bz a, .attachment_list .bz2 a, .attachment_list .rar a, .attachment_list .tgz a, .attachment_list .tar-gz a, .attachment_list .tar a, .attachment_list .gtar a, .attachment_list .cab a {
	background-image: url(img/page_white_zip.png);
}

havnt tried it yet but it makes complete sense, ta for you help.

This is an automated way of having the pdf icon display on the left of your link.
I tried many different plugins but I found this the best

a[href$=".PDF"], a[href$=".pdf"] {
	padding: 2px 2px 2px 20px;
	background: url("images/pdficon_small.gif") left center no-repeat;
}

You will need to download a pdf icon and upload it to your images folder.

Cheers