Do you use icons on files' links to not to surprise users?
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.
- Implement the icons to SSW Rules
- Add examples to Example Rule + Markdown Cheatsheet
- Improve the examples in this rule
Don't surprise users! For the following file/link types, use icons:
- PDF: This is a PDF file
- DOC or DOT: This is a Word Document file
- XLS: This is an Excel Spreadsheet file
- PPT: This is a PowerPoint file
- TXT: This is a text file
- AVI, MOV, MPG etc.: This is a video file
- WAV, WMA, MP3 etc.: This is a music file
- ICS or VCS: This is a calendar file
- ZIP: This is a zip file
- YouTube: This is a link to a YouTube Video
- Mailto: This link will send an email
You should also use an icon to make external links clear.
How to add an icon before a link with CSS
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).
(Recommended) Using font icons, like FontAwesome
Find the icon unicode at FontAwesome icons page and replace on the CSS "content" value.
a[href$='.pdf']:before
content: "\F08B ";
font-family: FontAwesome;
padding-right: 4px;
display: inline-block;
}Figure: Adding an icon before - for different file or link types
Using images
Add the icon image to your server and add the path as background URL.
a[href$='.pdf']
{
background: transparent url(/images/icon_pdf.gif) center left no-repeat;
padding-left: 20 px;
}
