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.

 

Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

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 ›

Escribe un comentario