Iconize Textlinks with CSS

tlrobinson · on Jan 27, 2008

For those who only care how it's done...

    a[href $='.pdf'] { 
       padding-right: 18px;
       background: transparent url(icon_pdf.gif) no-repeat center right;
    }

    a[href ^="mailto:"] {
       padding-right: 20px;
       background: transparent url(icon_mail.gif) no-repeat center right;
    }

CSS can match the beginning or end of attributes ("href") of a certain tag ("a"). Pretty simple, but neat.

kingnothing · on Jan 27, 2008

I wonder if this could be hacked together, browser side, so all links display like that. That would be a pretty neat thing to have.

DarrenStuart · on Jan 27, 2008

yep it would be fairly simple to do. The problem with this method is IE6 does not support it and if you are doing client work they are not going to like the fact that it does not work on IE6.

tlrobinson · on Jan 27, 2008

That's what this does, with CSS. See my other comment.

kingnothing · on Jan 27, 2008

Well, I meant that it would be cool if it was integrated with your browser so all links on all web sites would display like that. I never got in to user css files, so I'm not sure if that is something possible or not.

tlrobinson · on Jan 27, 2008

In fact, I just tried it and it does work with user CSS stylesheets. Just copy the CSS to a file, change the URLs for the images to an absolute URL on the web (possibly local?), and set your browser to use that CSS file.

However, it doesn't work well for every site, sometimes the icon is placed behind the link text.