BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Iconos en links usando CSS

17/JUL/2008 6.549 visitas Ver comentarios
Iconos en links usando CSS

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Esta es una excelente solución para aquellas veces en las que necesitamos hacer una lista de descargas y queremos que cada uno de los links tengan un icono representativo del tipo de archivo que vamos a descargar.

Se le puede asignar a cada enlace con una o más extensiones una imagen para imprimir y que se vea como en la imagen de ejemplo, tampoco es necesario agregarlo para todos, sólo las extensiones que nos interese, una entrada en el CSS y listo!

En el link que dejo en estas líneas, hay una colección de iconos para descargarse y en el código está el ejemplo de como usar esta técnica.

Y el ejemplo del código de más abajo nos quedaría como la siguiente imagen...

Código 1 - CSS
a[href $='.pdf'] {
padding-left: 20px;
background: transparent url(icon_pdf.gif) no-repeat center left;
}

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018