Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039

Download­Link­Icon Stack

add a file specific Font Awesome icon to download links

This stack is more or less a sibling of the ExternalLinkIcon3 Stack, but instead of adding an icon to the end of a link to another page, it adds an icon before or after a (text) link to a downloadable file. The stack will automatically add the most appropriate Font Awesome icon based on the file extension, but you can also override its choice.

It works seamlessly together with the LinkPlus Stack, so you can now also make download links easier to use for visitors with vision and dexterity impairments in mind – and at the same time make those links look cool too.

Another nifty feature of the DownloadLinkIcon Stack is that you can optionally force a download of the file instead of the file opening in the browser. See the limitations below for browser support.
When offering downloads, you will notice that many file types will open in the browser instead being downloaded. To force a download instead, there are many options. The most common options can be found on this page.
Demo
Visit the demo page for examples on how this stack can improve the accessibility of your download links.

Usage
Drag one or more stacks that can contain text or HTML in the drop zone of the stack and add your links to downloadable files.
The stack will automatically add the most appropriate icon based on the file extension.
The stack recognizes extensions in lowercase and uppercase, and a mix of both: file.pdf , file.PDF and file.Pdf all work, but not in every browser. See the limitations below for the details.
Optionally, you can override the icon chosen by the stack:
select the option custom icon for all download links to choose an icon for all download links inside the stack (    or )
add a class to a download link to override the icon for this link (fig. 1). See this page for an overview of all icons and their classes
Adding a class to the link to force an icon will overrule the option custom icon for all download links.
Use the option
show cheat sheet to display an overview in Edit Mode of all the classes available (fig. 2).

Need help using it on a non-stacks page? Here’s a tutorial.

NB
The color for a visited link does not work in Chrome, Opera, Internet Explorer and Edge.
When combining this stack with my LinkPlus Stack, nest the DownloadLinkIcon Stack inside the LinkPlus Stack, not the other way around.
The option use with custom selector of the LinkPlus Stack cannot be used in this case!
When a file extension is not recognized, no icon will be shown. If you think the file extension should recognized by the stack, please let me know, so I can add it. Meanwhile, you can add a class to the link to force a proper icon (fig. 1).

Limitations
When the visitor has JavaScript disabled in his browser, the force download option will not work.
The force download option does not work in any version of Internet Explorer, Edge 12 or iOS Safari. In Firefox and Chrome 65+, this only works when the file is on the same domain as the link.
The stack does its best to recognize extensions in both lowercase and uppercase, but that does not work with every browser. In Internet Explorer, Edge and Android Browser only lowercase extensions are recognized.
So: file.pdf in every browser; file.PDF and file.Pdf does not work in aforementioned browsers.

Background
This stack is partly based on a CSS file by Greg Schoppe.

Support
Please use this form to report all issues, questions and comments.

This stack requires RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).

Add a class (click to enlarge)

fig. 1: add a class to a download link to force a specific icon

downloadlinkicon-edit

fig. 2: showing the DownloadLinkIcon Stack cheat sheet in Edit mode

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…