Show File Icons In Front Of Links Through CSS

Here’s a simple CSS code to show specific type of file-icons in front of those links.
See this hack in action at: PoolieStudios [code author]
This hack automatically detects the type of link (file) and then shows the specific icon in front of that link, so you don’t have to include any “class” in the <a> tags.
I have uploaded the icons used in the code to TinyPic.com, you may use the same links or you may upload them to any other image host too.

Follow these instructions to show those icons in your blog:
Log in to Blogger, go to Layout -> Edit HTML -> find (CTRL+F) this code:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<style type=’text/css’>
/* Iconize 0.5 */

/* websites (pictures and movies) */
a[href *=”youtube.com/watch?”], a[href *=”sevenload.com/videos/”], a[href *=”metacafe.com/watch/”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/1z1vejk.jpg) no-repeat center right;
}

a[href *=”flickr.com/photos/”], a[href *=”zooomr.com”], a[href *=”imageshack.us”], a[href *=”bubbleshare.com”], a[href *=”sevenload.com/bilder/”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/5minvr.jpg) no-repeat center right;
}

/* extensions */

a[href$=’.doc’], a[href$=’.rtf’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/33mv0ab.jpg) no-repeat center right;
}

a[href$=’.txt’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/jaup7q.jpg) no-repeat center right;
}

a[href$=’.xls’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/9pvndy.jpg) no-repeat center right;
}

a[href$=’.rss’], a[href$=’.atom’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i44.tinypic.com/outtn8.jpg) no-repeat center right;
}

a[href$=’.opml’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/3151×14.jpg) no-repeat center right;
}

a[href$=’.phps’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/do87jp.jpg) no-repeat center right;
}

a[href$=’.torrent’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/2vttwdf.jpg) no-repeat center right;
}

a[href$=’.vcard’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/2s0xq8i.jpg) no-repeat center right;
}

a[href$=’.exe’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/2e2jmn7.jpg) no-repeat center right;
}

a[href$=’.dmg’], a[href$=’.app’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i44.tinypic.com/1zu35j.jpg) no-repeat center right;
}

a[href$=’.pps’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/16c9wuo.jpg) no-repeat center right;
}

a[href$=’.pdf’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/28am90y.jpg) no-repeat center right;
}

a[href$=’.xpi’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/353331s.jpg) no-repeat center right;
}

a[href$=’.fla’], a[href$=’.swf’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/514hhi.jpg) no-repeat center right;
}

a[href$=’.zip’], a[href$=’.rar’], a[href$=’.gzip’], a[href$=’.bzip’], a[href$=’.ace’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/290yez6.jpg) no-repeat center right;
}

a[href$=’.ical’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/25qyt5v.jpg) no-repeat center right;
}

a[href$=’.css’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/2yo5zzm.jpg) no-repeat center right;
}

a[href$=’.ttf’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/14lo29.jpg) no-repeat center right;
}

a[href$=’.jpg’], a[href$=’.gif’], a[href$=’.png’], a[href$=’.bmp’], a[href$=’.jpeg’], a[href$=’.svg’], a[href$=’.eps’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/5minvr.jpg) no-repeat center right;
}

a[href$=’.mov’], a[href$=’.wmv’], a[href$=’.mp4′], a[href$=’.avi’], a[href$=’.mpg’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/1z1vejk.jpg) no-repeat center right;
}

a[href$=’.mp3′], a[href$=’.wav’], a[href$=’.ogg’], a[href$=’.wma’], a[href$=’.m4a’] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/w2hq2a.jpg) no-repeat center right;
}

/* messenger */
a[href ^=”aim:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/qq94hs.jpg) no-repeat center right;
}

a[href ^=”msnim:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/2qu43l2.jpg) no-repeat center right;
}

a[href ^=”xmpp:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/2mqj2pi.jpg) no-repeat center right;
}

a[href *=”icq.com”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/2eehphu.jpg) no-repeat center right;
}

a[href *=”edit.yahoo.com/config/send_webmesg?”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/20py7g5.jpg) no-repeat center right;
}

a[href ^=”callto:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/15foodv.jpg) no-repeat center right;
}

a[href ^=”skype:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/2mcuif.jpg) no-repeat center right;
}

a[href ^=”gg:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/r1il3a.jpg) no-repeat center right;
}

/* email */
a[href ^=”mailto:”] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/6tjrrb.jpg) no-repeat center right;
}

/* use this class to make sure that images won’t get iconized */

.imageLink {
padding-right: 0px !important;
background: none !important;
}
</style>

Of course you do not have to use all of them, neither is their any restriction to use any additional file types.
So if you have got an idea how to include new file extensions with corresponding image-icons then feel free to include them.
You may download and use these additional icons, from
1. DeviantArt
2. FreeIconsDownload
3. FreeIconsWeb

6 thoughts on “Show File Icons In Front Of Links Through CSS

  1. Well no….as I have said you don’t have to add all the code, so you can select only some of those icons, moreover these icons are so small that they’ll load almost instantly…and finally there is no javascripting in this hack, so you don’t have to worry for the load time.

  2. @LeBlogger: I thinks is like this..

    <span>a[href$='<span style="color: red;">.css</span>'] {
    <span> <span><input name="IL_MARKER" type="hidden"/>padding</span>: 5px 20px 5px 0;</span>
    background: transparent url(<span style="color: blue;"><span>http://i40.<span><input name="IL_MARKER" type="hidden"/>tinypic</span>.com/2yo5zzm.jpg</span></span><span>) no-repeat <span><input name="IL_MARKER" type="hidden"/>center</span> right;</span>
    }</span>

    Instead of the <span>" href$='<span style="color: red;">.css</span>' ", put " target='_blank' "..</span>

    Tell me if it works 😉

Leave a Reply

Your email address will not be published. Required fields are marked *