Incorpora iconos a tus enlaces usando CSS
Martes, 23 de Enero de 2007 01:14

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:

 

Código
  1. a[href$='.extension/URL'] {
  2. padding-right: 20px;
  3. background: transparent url(icons/icono.gif) no-repeat center right;
  4. }

 

 

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

 

 

Código
  1. a[href$='.doc'] {
  2. padding-right: 20px;
  3. background: transparent url(icons/doc.gif) no-repeat center right;
  4. }

 


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

 

 

Código
  1. a[href *="flickr.com/photos/"] {
  2. padding-right: 20px;
  3. background: transparent url(icons/icon_pic.gif) no-repeat center right;
  4. }

 

 

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

 

 

 

 
 
Comentarios (2)
1 Viernes, 19 de Octubre de 2007 06:49
Martha
tiempo que anda buscando esto de poner iconos usando css, buen articulo, muchas gracias.
2 Jueves, 15 de Noviembre de 2007 19:06
José
Muy bueno, justo lo que necesitaba, gracias men...

Agregue su comentario

Tu Nombre:
Tu email:
Tu sitio web:
Comentario:
yvComment v.1.23.0