[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 lg=”4″ md=”4″ sm=”12″ xs=”12″ ]
(note: the links below are fake, but you can inspect them to see how the icon is selected)