Add Auto-sensing File Type Icons to lists of downloads, with FontAwesome and CSS

ADVERTISEMENT:

[row]
[column lg=”8″ md=”8″ sm=”12″ xs=”12″ ]
Recently, I needed to create a downloads area that was going to be managed by a client.  It’s a reasonably straight forward task, except for one snag: They wanted icons next to the links, denoting what filetype the download was.  I could have created a few custom classes to add to the links, but the client is not at all technical, and I wanted to involve as little manual editing as possible.

Instead, I wrote a quick set of CSS selectors that filter the links by their href attributes, and provide the proper icon.  I still provided override classes, in case it doesn’t always detect properly, but so far, it seems to be working perfectly.

I’ve included the CSS below.  If you want to use it or modify it, feel free to do so.  To use, just include FontAwesome in your project, include the css below, and add a “link-icon” to any link you want to display an icon for.
[/column]
[column lg=”4″ md=”4″ sm=”12″ xs=”12″ ]
Examples
(note: the links below are fake, but you can inspect them to see how the icon is selected)

[/column]
[/row]

5 thoughts on “Add Auto-sensing File Type Icons to lists of downloads, with FontAwesome and CSS

  1. Mike England says:

    Thank you for sharing this! I was looking for something similar to this and am glad it’s not too difficult to setup. This is pretty cool and takes almost the same amount of code that it would have to create classes to manually add icons.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>