How to auto sense file type on download page with fontawesome and css
Have you ever wanted to find an easy way to automatically determine which icon font to use on your download page based upon the file type? A friend tweeted out a great website that discussed just this and gave his sample CSS file to use along with Font Awesome. Gregory Schoppe’s post back in 2015 gave a very simple description and the sample CSS was easy to follow.
So I did a little research on CSS with my favorite website W3Schools, because I seem to always forget how to use the advanced selectors and some of the very neat tricks you can use. What I was having a difficult time with at first was how to use attribute selectors and especially how to select the ending portion of an attribute’s value.
In Greg’s code, he looks for the ending of the link href to find out what the file type is. For example, a link to a PDF file will end with .pdf and you can use a CSS selector to match the ending of the link and define the styles you would like to add. You could do some simple styles like change the font color or size or background etc. But you can also get creative at use a pseudo element like ::before to place content before your link. This is what he did in order to add the Font Awesome icon for each download file.
While you could easily just add the correct icon as a class to the file link in the html for the page, this would require you to know the file type of the link prior. As a second option, you can use CSS to compute the file type without you needing to know which one it will be and then letting CSS place the correct icon. To do the later, first be sure to add the Font Awesome CSS link in your <head> section. W3Schools gives a link to the current version (4.7.0 at the time of this article)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
and then in your CSS stylesheet add the code for each icon you want to have. Your first style should account for any file type that is not described more specifically later in your CSS with something similar to the following
a.link-icon::before { content: '\f15b'; font-family: 'FontAwesome' }
Note the use of the class of link-icon, be sure to add class="link-icon" to your link for this to work. Also, be sure to add the font-family of FontAwesome or the font for your page will be used instead of the intended Font Awesome icon fonts.
Below this, you can get more specific. For example, if you are choosing an icon for a PDF file add
a[href$='.pdf'].link-icon::before { content: '\f1c1'; }
You can also give multiple types the same icon, as in for images with the following
a[href$='.jpg'].link-icon::before,
a[href$='.png'].link-icon::before,
a[href$='.gif'].link-icon::before { content: '\f1c5'; }
What you get is something that looks like the following. Please note that following links do not go to real pages or images, so do not bother clicking on them.
testPage.pdf
testUnknown.abc
testImage.jpg
You can of course use any of the Font Awesome icons that are available, even if they don’t make sense. The way this works, using the a[href$='.pdf'] tells CSS to locate any link where the ending of the link is .pdf because the $ after href tells CSS to look only at the end of the attribute value. There are different symbols that will look at the beginning of the value, so check W3Schools to see more under the CSS Attr Selectors section. The ::before pseudo element tells CSS to add something before the selected element and in our case we are adding content. the \f1c5 is the code needed that choses the image icon from the Font Awesome font
I recommend reading the W3Schools often to keep brushing up on some of the tricks you might be able to create. I keep thinking that I might be able to come up with some crazy CSS selectors now to use on my page just to add fonts or some weird styles. One useful idea might be to look for the first part of a link to see if it points to a site not of my own and display an icon that shows it to be an outside link. Not sure if this works, but I would set all links to the internal icon, then check [href|='http://'] to set the link to external icon and then finally check [href|='http://remejy'] to set the icon back to internal. My thought is assume all links internal at first because not all internal links start with the http:// and then check for the http:// assuming that might be trying to set an external link. And at the end if it was me trying to use http://remejy as a fully qualified link to myself I would reset the icon back to internal, because CSS checks things in order from top to bottom in your stylesheet with the later items being more specific (in essence override) a prior style.
Send me your ideas on crazy selectors you might come up with to use and have fun with it. Or better yet, write about it on your own blog and point to it for me.
Rethinking how I do my job
Small dog and antibiotics
