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.

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