How To Style PDF Links With An Icon Using CSS

A typical webpage has numerous links. By default, all links look the same. This no doubt has its advantages. But then, what if you want links to certain types of files to look different? Well, the best thing you can do is to attach icons to the links.

Let’s take pdf files, for instance. The pdf icon is one of the most recognisable. Anyone who has been around computers can spot it instantly. When building a webpage which contains pdf links, this is an advantage. You can insert a pdf icon next to the links. This lets web users to easily tell pdf links apart from the other links on the webpage.

1. Get A Picture of the PDF icon

The first step is to get a picture of the pdf icon. There are numerous such pictures which are freely available online. Icon finder is one of my favourites.
pdf icon

Once you find the right picture, place it into your image folder. In our example, the file name is “pdf-icon.png” and it is in a folder called “images”.

2. Insert the pdf links on the webpage

You can insert as many pdf links as you want. For this example, we shall insert only one link as follows:

<a href= "sample-pdf-file.pdf"> Open PDF Document </a>

It will look like any other link. To make it look different, we’ll add some CSS styling. But first, we have to select it.

3. Use CSS attribute selectors to select pdf links

This is the most important step. Make sure you understand it perfectly.

Now, CSS has what are called “attribute selectors”. Attribute selectors are basically used to select html elements on the basis of their attributes. To select pdf links, you have to select all <a> tags which have a href attribute which points to a pdf file. This is how you select them:

a[href$= ".pdf"]

This is what the following selector means:

a – select all <a> tags

a[] – select all <a> tags which have the following attributes. The attributes are placed within the square brackets.

a[href] – select all <a> tags which have the following href attribute

a[href$] – select all <a> tags whose href attribute ends with. The $ means “ends with”

a[href$= “.pdf”] – select all <a> tags whose href attributes end with “.pdf”.

Of course you know that “.pdf” is an extension which denotes a pdf file. As such, any file ending with “.pdf” must be a pdf file.

Basically, a[href$= “.pdf”] selects all the pdf links on the webpage.

Read this page for more info on styling links

4. Attach the pdf icon to the links

The following style adds an icon to each of the pdf links on the webpage.

a[href$=".pdf"]{
	background-image: url(images/pdf-icon.png);
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 35px;
	height: 35px;
	display: inline-block;
	padding-top: 10px;
}

This style basically attaches the pdf icon as a background image to the link. The main rule which does this is:

background-image: url(images/pdf-icon.png);

The other rules are added to ensure that the image is visible. For instance, the height rule gives the link a height which is equal to that of the image. The padding-left moves the text to the left – ensuring that it doesn’t appear on top of the icon.
See this page: how to set background image in HTML for more info on background image CSS properties

You can actually use the same approach for styling other types of links e.g. links to Microsoft Word documents, mp3 files or mp4 files. All you have to do is find the picture of the icons, and tweak the attribute selector. For instance, to select all links to mp3 files, you use the following selector a[href$=”.mp3″].

Posted in Tutorials Tagged with:

Leave a Reply

Your email address will not be published. Required fields are marked *

*