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

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.

::: no-border

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
DOC	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 an audio file
ICS or VCS	This is a calendar file
ZIP	This is a zip file
Google Maps	This is a Google Map link

:::

❌ Figure: Bad example - Users would expect all these hyperlinks to work the same way

✅ Figure: Good example - The PDF icon indicates one of the links is not a webpage

How to add icons to links via CSS

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).

Option A: Using font icons, like FontAwesome (Recommended)

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