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.
See the Pen Link Icons Test by Greg Schoppe (@gschoppe) on CodePen.
Ritchie says:
Awesome, thanks so much!
Aurélien Debord says:
Very useful. Thanks Gregory
pKaram says:
Thank you !
Brittany S says:
This is awesome and saved me so much time, thanks for this.
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.