Secret ingredients to quality software


Do you use icons on files' links to not to surprise users?

Last updated by Tiago Araújo [SSW] on 26 Apr 2021 10:52 pm (7 days ago) See History

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.

  1. Implement the icons to SSW Rules
  2. Add examples to Example Rule + Markdown Cheatsheet
  3. Improve the examples in this rule

Don't surprise users! For the following file/link types, use icons:

You should also use an icon to make external links clear.

Figure: Bad Example - The user would expect all these hyperlinks to work the same way

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

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.

    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.

background: transparent url(/images/icon_pdf.gif) center left no-repeat; 
padding-left: 20 px; 
Adam CoganAdam Cogan
Tiago AraujoTiago Araujo

We open source. This page is on GitHub