Special icons attached to special links

I thought I would share a little tip that just makes getting around sites easier and easier for the web content creator to maintain. If you find you have a lot of external sites you are linking to or links to PDFs it’s good practice to somehow tell people that information before they click. Otherwise they may download something they didn’t want to or are trying to find a way to get back to where they came from. It’s been considered good practice to add (PDF) or (DOC) at the end of a link but not everyone does it when you have multiple authors or they do it inconstantly with lower and upper case.

The code below shows how to add an external link icon and a special link icon if it’s a secure site or if it’s an email address. Note the code changes a little for when it’s a file type like a .DOC or a .PDF. You must also tell the CSS as in the example here how big your icon is so it doesn’t overlap the text. The very last part is important to tell the browser that if it isn’t any of these special things just leave it blank.

Here is an example link where this college needed a list of scholarships available. The inhouse links are for scholarships administered by the college but the ones with the icons are outside links that they are not responsible for. By doing the code below no modification to the HTML is necessary. The browser will read the CSS and figure out how to display the link.

#middlecol a[href^="http://"] {
    background: url(https://www.yourdomain.com/images/external.png) 
    center right no-repeat;
    padding-right: 13px;
}

#middlecol a[href^="https://"] {
    background: url(https://www.yourdomain.com/images/external.png) 
    center right no-repeat;
    padding-right: 13px;
}

#middlecol a[href^="mailto:"] {
    background: url(https://www.yourdomain.com/images/email.gif) 
    center right no-repeat;
    padding-right: 20px;
}


#middlecol a[href$='.pdf'] {
    background: url(https://www.yourdomain.com/PDFs/pdficon.gif) 
    center right no-repeat;
    padding-right: 20px;
	line-height:20px;

}

#middlecol a[href$='.doc'] {
    background: url(https://www.yourdomain.com/images/wordicon.gif) 
    center right no-repeat;
    padding-right: 20px;
	line-height:20px;

}

#middlecol a[href$='.docx'] {
    background: url(https://www.yourdomain.com/images/wordicon.gif) 
    center right no-repeat;
    padding-right: 20px;
    line-height:20px;

}

#middlecol a[href^="http://www.yourdomain.com"]  {
    background: none;
    padding-right: 0;
}