ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to Auto Add Icons To Links Based On File Type Using CSS

CW
How to Auto Add Icons To Links Based On File Type Using CSS

Interesting title… Isn’t it? Well, in this article, I’ll guide you through a tutorial wherein you’ll add few blocks of code/CSS that shall automatically add icons next to your links based on the type of file that is linked to (For example – .pdf, .txt, etc…). The catch here is that, we’ll be using pure CSS to achieve this – no javascript, no jquery. Still confused about the article? Then, have a look at the screen shot below.

file type link demo So, without wasting time, let me begin my tutorial. I would like to explain this tutorial based on one file type – “.pdf” files. Later, I’ll explain about extending the same CSS codes for other file types. WordPress Users may add the following codes to your custom.css file and upload the same to your host servers while users on blogspot shall add the following codes before ]]></b:skin> on your blogger template.

a[href$=".pdf"]:before {
padding: 5px 15px;
margin: 0 5px 0 10px;
content: "";
background: url(http://www.yourdomain.com/wp-content/uploads/2011/08/pdficon.png) no-repeat;
}

Well, that’s it! Save your template/theme. To realize this effect, just include a link which ends with the extension .pdf in your article. You should be able to realize the effect on publishing the article. Possible customizations include swapping the position of the icon (before/after the link) and changing image icon from the one I used in the CSS with one of your choice.

To swap the position of the icon, replace a[href$=".pdf"]:before { with a[href$=".pdf"]:after { in the first line of the CSS mentioned earlier. To change the image, just replace the URL of image with your URL. It’s pretty self-explanatory.

As mentioned earlier, you may extend this effect to various other file types like .txt or .psd or any file type of your choice. To do so, all you need to change in the codes are to replace “.pdf” with the file type of your choice and correspondingly change the image as well. For example, if you wish to add icons next to links that have the extension .txt, then use the following CSS.

a[href$=".txt"]:before {
padding: 5px 15px;
margin: 0 5px 0 10px;
content: "";
background: url(http://www.shoutmeloud.com/wp-content/uploads/2011/08/text-file-icon.png) no-repeat;
}

You can extend this simple CSS to add icons to external links on your blog like you see on Wikipedia. Similarly, you can enjoy a purely CSS based Tooltip on your blog with slight modifications in the above CSS. I’ll explain them in the upcoming articles that I post on SML, provided you like the current one. So, shout your opinions via comments. :)

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 29 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 5 comments… add one }

  • Sandeep Singh

    I dont think this one is of much use for bloggers but will be essential for sites having more download files.

    Reply
  • Mohammed

    Great. I really like this article. It is very simple and fabulous approach.

    However, how can I use this thing for a normal website (not wordpress and blogger blog)? And regarding the icons, from where I can get these icons? Should I have them in my machine first?

    Reply
    • Mukund

      Yes! You can apply the same on any website! Icons can be fetched from Google Image Search(make sure they are not copyrighted). Not necessary you have them on your machine. Just replace the URL in the CSS and that should do:)

      Reply
  • rakesh kumar

    I would love to have tooltips based on CSS. If possible please do write for us.

    Reply
    • Mukund

      @Rakesh: Sure! I’ll soon post an article about CSS tooltip!

      Reply

Leave a Comment