Frecosse Website Design

On most of the websites I’ve been building recently, I’ve been using the following snippets of code to make user-friendly icons appear immediately after icons — automatically.

It’s all done with CSS — though it may be something you’ve not seen before — and it’s an excellent timesaver once you’ve got it set-up.

EDIT:
You can see this technique in action on the newly relaunched Awards UK Ltd website

Practical applications of this code are to add icons to indicate links which open in a new window, links to PDF documents etc.

Here’s an example of how to use CSS to add a graphic to links which open in a new window (‘_blank’):

a[target $='_blank'] {
	padding-right:20px;
	background: transparent url(icons/newWin.gif) no-repeat center right;
}

This will generate a link that looks like:

• New Window Link

What this code does is look for links which contain ‘_blank’ within the href tags. It then adds a background image (with enough padding on the link so it doesn’t overlap any text that follows the link).

You can also use the following code to indicate e-mail links:

a[href^="mailto:"] {
	padding-right:20px;
	background: transparent url(icons/mail.gif) no-repeat center right;
}

This will generate a link that looks like:

• E-mail Link

This time, the code looks for links which start with ‘mailto:’ then applies the style — linking to a different icon.

Finally — for all those downloads that you have available on your website, you can use something along the lines of:

a[href$='.pdf'] {
	padding-right:20px;
	background: transparent url(icons/pdf.gif) no-repeat center right;
}

a[href$='.doc'],
a[href$='.docx'] {
	padding-right:20px;
	background: transparent url(icons/doc.gif) no-repeat center right;
}

a[href$='.xls'],
a[href$='.xlsx'] {
	padding-right:20px;
	background: transparent url(icons/doc.gif) no-repeat center right;
}

a[href$='.ppt'],
a[href$='.pptx'] {
	padding-right:20px;
	background: transparent url(icons/ppt.gif) no-repeat center right;
}

a[href$='.zip'] {
	padding-right:20px;
	background: transparent url(icons/zip.gif) no-repeat center right;
}

This creates the following links with icons:

• Word File
• PDF File
• Zip File

This time the code looks for the occurrence of a string within a link. This has the slight drawback that if you have a file called, for example, word.doc.zip — it would find two applicable icon styles.

However, because CSS loads in order, it would first apply the Word document icon, and then replace it with the Zip icon. It does it in this order because the ‘Zip’ icon is defined after the ‘Word’ icon. So this would present the correct icon.

Additionally, if you’re linking to a PDF document in a new window, and have defined the new window icon first, it will then show the PDF icon (preferred).

Of course, if you don’t want this to apply across your entire website, you can slam a specific DIV indicator in front of the style – and then it will only apply the icons within this DIV, eg:

#content a[href$='.pdf'] {
	padding-right:20px;
	background: transparent url(icons/pdf.gif) no-repeat center right;
}

Click on the following link to download a stylesheet and a set of icons that you can use on your website:

• AutomaticIcons.zip