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

Last updated by Zach Keeping [SSW] 4 months ago.See history

When a user clicks a hyperlink, they expect a webpage to open. If they click on a link that is actually a .doc/.docx file, they might encounter the unexpected experience of having Microsoft Word open in the background.

Don't surprise users! Use icons next to links to show different types of links/files.

Link/file type Option A - Font icons (e.g. FontAwesome) Option B - Image icons (e.g. SharePoint)
Regular link This is a normal link ...
External link This is an external link ...
YouTube This is a link to a YouTube video ...
Email (mailto:) This link will send an email ...
PDF This is a PDF file pdf icon
DOC This is a Word Document file docx icon
XLS This is an Excel Spreadsheet file xls file
PPT This is a PowerPoint file ppt file
TXT This is a text file txt file
AVI, MOV, MPG, etc. This is a video file video file
WAV, WMA, MP3, etc. This is an audio file audio file
ICS or VCS This is a calendar file calendar icon png
ZIP This is a zip file zip file
Google Maps This is a Google Map link map icon

link with icons bad
Figure: Bad example - Users would expect all these hyperlinks to work the same way

link with icons good
Figure: Good example - The PDF icon indicates one of the links is not a webpage

Use CSS to match the extension at the end of the <a> tag. Don't forget to add some padding to give it some space before the text (where the icon will be).

Using icon fonts saves time and hassle during the development process. It replaces the need to create/buy images, and upload them to the server. They will also look good on any screen resolution or display.

✅ UI - Consistent icons
✅ Fast to load (lightweight as no image)
✅ Free $
✅ Can be used in any size
✅ Large choice of icons (even more than UI Fabric!)
❌ Requires code (Inject CSS)

To implement use one of the different ways to set up Font Awesome. Then 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: Replace the content string with the Unicode value from the Font Awesome site

Option B: Using images

Create or buy a collection of icons that match your website style. The benefit is the ability to have custom and multi-colored icons, that can look exactly like a software logo for example. But it's usually not worth the hassle.

You will add each icon image to your server, and then add the path as background URL in the CSS file.

❌ UI - Hard to get all icons consistent
❌ Slow (injecting images)
❌ Paid $ (icon collection required if you want them to have a nice and consistent UI)
❌ Maintenance of needing to upload to server
❌ Requires code (Inject CSS)

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

Figure: Replace the path in background URL with each icon image

We open source. Powered by GitHub