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.

 


Categorías

CSS

Creativos Online

Perfil del administrador de Creativos Online, el punto de encuentro en Internet para todos los amantes del diseño gráfico y web. ¿Os animáis a... Ver perfil ›

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *