Home
Do you use icons not to surprise users (aka use the correct image for files)?
  v7.0 Posted at 30/06/2017 8:20 AM by Tiago Araujo

When a user clicks on a hyperlink they expect to open an HTML​ file. If you click on a hyperlink (but it is actually a .doc file) you wait and wait while it takes forever to instantiate an instance of Microsoft Word in the background.

Don't surprise users! Use the following icons:

File TypeExample
PDF Icon PDF This is a PDF file
JPG Icon JPG This is an Image file
DOC or DOT Icon DOC This is a Word Document file
XLS Icon XLS This is an Excel Spreadsheet file
PPT Icon PPT This is a PowerPoint file
TXT Icon TXT This is a Text file
AVI, MOV, MPG etc. Icon MOV This is a Video file
WAV, WMA, MP3 etc. Icon MP3 This is a Music file
SNP Icon SNP This is an Access Database snapshot file (discontinued and not recommended)
EPS Icon EPS This is an EPS file
ICS or VCS Icon VCS This is a calendar file
EXE or ZIP DownloadThis is an executable or zip file
Mailto: Icon MailTo This will send an email
XML / RSS Icon XML This will subscribe to RSS
ODF Icon ODF This is an Outlook Item Template
Page This is a link to password protected page
YouTubeThis is a link to a YouTube Video
Image good link
Figure: FYI there are the same images used by Google at GoogleDesktopSideBar.htm  
Image bad link
Figure: Bad Example - The user would expect all these hyperlinks to work the same way
Image good link
Figure: Good Example - The pdf icon (before a hyperlink) indicates it is not a web page

How to add an icon before a link with CSS

Add the icon image to your server. Then use $= to make the match the extension of the >a< tag on your CSS. The padding is to give it some space before the text (where the icon will be).

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


We have the programs SSW CodeAuditor and SSW LinkAuditor to check for this rule.

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments: