[No longer available]
Nobody likes unpleasant surprises. Its annoying to be browsing the net and suddenly click on an unexpecting file type. PDF's need to load, music can be embarrasing if you're browsing in a public place, and videos can be suicidal on a slow connection.
In response to this, many people have started putting little icons after links to indicate what the link links to. Unfortunately, until now, this often involved fiddling around with images.
Not any more
The file-extensions stylesheet aims to cut away all of the hassle of adding icons by automating and simplifying the process.
By including the stylesheet:
- PDF's get an icon without any change needing to be made: example (Can also use class 'link-pdf')
- MS Word Documents's (boo hiss) get an icon without any change needing to be made: example(Can also use class 'link-doc')
- RSS files with a .rss extension get an icon without any change needing to be made: example (Can also use class 'link-rss')
- Java files get an icon without any change needing to be made: example (Can also use class 'link-java')
In addition, by specifying a type as a class ie:
<a class='type here' href ='...' >
the following icons are available.
- link-external : example
- link-html : example
- link-document : example
- link-font : example
- link-sound : example
- link-source : example
- link-text : example
- link-ttf : example
- link-midi : example
- link-vector : example
- link-video : example
To install download the zip file and extract it into your web directory. Then add the following line in the header of your html file
<link rel="stylesheet" type="text/css" href="(Location of Downloaded Files)/file-extensions.css" />
There may be a few compatibility problems. It's only been tested on firefox. Let me know if it doesn't work.
CSS based on idea from http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS