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.

 

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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 ›

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *