• X

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

    By in Design

    Bluehost hosting

    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 How to Auto Add Icons To Links Based On File Type Using CSSSo, 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. icon smile How to Auto Add Icons To Links Based On File Type Using CSS

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Mukund has written 30 articles.

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

    { 5 comments… read them below or add one }

    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

    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

    Sandeep Singh

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

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `