Iconos en links usando CSS

Escrito por: Martín el 17-07-2008 06:54:59 y leído 647 veces

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 CSS

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

Categorías: Css • Iconos • Links •

Artículos relacionados:

• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• Uso de jScrollPane para jQuery. Elegante scroll en tus div
• jQuery Alert Dialogs... reemplaza las alertas
• Tamaño de imágenes automático con jQuery
• Tiny Scrollbar... la alternativa a jScrollPane para jQuery
• Animated jQuery Menu. Menú multinivel animado con jQuery
• Evitar el redimensionado de los textearea en webkit

100 Búsquedas de este artículo:

como usar iconos usando jquery ui • css links imagenes iconos • links con iconos con css • icono a los link css • Iconos en links usando CSS • iconos de enlace en css • css enlace icono • enlaces con iconos css • css usar icono • icono en link css • link con icono en css • css link listado • iconos css • vinculo CSS con icono • poner iconos un link css • css iconos de enlace • enlaces utilizando imagenes y css • jquery iconos em link • links lista iconos • icono link version para imprimir css • css link con icono • link con iconos css • icono a link html con css • iconos en enlaces con css • iconos css links • css link leido • imagen icono link css • lista iconos css • enlace con icono css •