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/3151x14.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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

6 comments

Write comments
May 29, 2009 11:12 PM delete

But I think it makes our blog load slower, isn't it?

Reply
avatar
May 30, 2009 1:09 AM delete

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.

Reply
avatar
June 04, 2009 6:45 AM delete

how to apply this for every target="_blank"???????

Reply
avatar
Daniel
August 24, 2009 5:25 PM delete

@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 ;)

Reply
avatar
Daniel
August 24, 2009 5:26 PM delete

Hey, what !?

What is that at the comment code ? It got messed up T.T

But you get the point

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon