Ponle iconos a tus enlaces usando CSS

La idea es muy simple, en Ask the CSS Guy enseñan como agregar iconos a los enlaces utilizando CSS.

Es tan sencillo como agregar:

a[href$=’.extension/URL’] {
padding-right: 20px;
background: transparent url(icons/icono.gif) no-repeat center right;
}

De esta forma si nosotros queremos que aparesca un icono cada vez que linkeamos un archivo .doc pondremos:

a[href$=’.doc’] {
padding-right: 20px;
background: transparent url(icons/doc.gif) no-repeat center right;
}

Y si enlazamos una imágen hacia Flickr tendremos que agregar:

a[href *=”flickr.com/photos/”] {
padding-right: 20px;
background: transparent url(icons/icon_pic.gif) no-repeat center right;
}

Aquí hay un ejemplo de implementación para descargar.