Queli Coto Desarrollador Web

Este es otro de esos post, con los que intento empezar una serie sobre un tema, hasta cual llegare??

Para el proyecto web, que estoy terminando y aunque muchos me habéis preguntado por el, no lo voy a subir hasta que lo tenga completamente terminado y probado no quiero ningún fallo, por lo menos que no se note:)

Esta técnica es bastante sencilla, y bastante útil, la podemos poner en nuestro css por defecto, y no tener que preocuparnos de los iconos según su extensión

1 Poner un icono según su extensión
Para los típicos pdf o doc, el código es el siguiente

[css]
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(images/PDFIcon.gif) center left no-repeat;
}
[/css]
explicación con el seudo-selector [href] y con algo de expresiones regulares podemos decir que todos los enlaces cuyo atributo href termine ( $= ) por pdf, le aplicamos los estilos necesarios para colocar el icono

2 Poner un icono según su dirección de destino
Para los típicos mailto o enlaces externos

[css]
a[href^="mailto:"] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(images/MailTo.gif) center left no-repeat;
}

a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(images/ExternalIcon.gif) center right no-repeat;
}
[/css]
explicación con el seudo-selector [href] y con algo de expresiones regulares podemos decir que todos los enlaces cuyo atributo href Empiecen ( ^= ) por http o mailto, le aplicamos los estilos necesarios para colocar el icono

Después usar la imaginación

3 Poner un icono para varios tipos de extensión
Esto no haría falta ponerlo, pero para algún despistado.

[css]
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(images/ZIPIcon.gif) center left no-repeat;
}
[/css]

ver ejemplo funcionando