This post is for a friend that was asking how to easily show icons with different file extensions. What I’ve setup are some styles that can just be copied over to any stylesheet and used.
I converted the icons downloadable at famfamfam.com to base64 and placed them in the styles. Without further ado, here they are:
<style type="text/css"> These are all the basic file types I could think of and obviously you could add more to the list. I also added the with-icon, but this could be easily removed so it applies to all your hrefs all the time. There are a couple “special” styles at the bottom of the list for email and http links that use the ~=, which means starts with. All the rest of the styles work off the $= selector, which means ends with. To give the same icon to multiple file types, you just separate the selector with a comma.
In order to use these styles, you just do this:
<ul> This ends up looking like this:
