

Iconize Textlinks with CSS - chaostheory
http://pooliestudios.com/projects/iconize/

======
tlrobinson
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
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.

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

~~~
kingnothing
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
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.

