Excelente paquete de iconos CSS3, es un proyecto llamado social el cual mediante un set de imagenes y con la ayuda de CSS3 nos permite crear multiples diseños de botones CSS3 en diferentes estilos, es un metodo bastante sencillo y muy bien implementado, de este modo un set de 72 iconos de servicios web se multiplica a varios cientos de botones CSS3.
En las imagenes que acompaña el post pueden ver algunas aplicaciones que se pueden conseguir, al final del post el enlace para descargar el paquete de iconos gratis completo.
Características
- Vectores vectoriales
- Incluye fuentes y utiliza @font-face
- 72 iconos de diferentes servicios web
- Soporte para aplicación como iconos o como botones
- Escalables utilizando unidades EM
- Soporte Cross-Browsing
Código CSS3: Como utilizarlos
- Debes incluir en la cabecera Head el archivo “zocial.css”
- El código HTML por ejemplo para un boton de Facebook es:
<button class="zocial facebook">Sign in with Facebook</button>
- También puedes utilizar etiquetas: DIV o A, en vez de BUTTON
- Si deseas utilizar los iconos puedes utilizarlos de esta manera:
<a class="zocial youtube icon">YouTube</a>
- Más ejemplos en el sitio web del proyecto.
Enlace: Descargar | Smashing Magazine
Corre la voz con tus amigos/contactos:
Ups no salió el código, pero bueno es la etiqueta “a” abre
primero y cierra de ultimo.
Que buen aporte Jorge, estos iconos son muy prácticos y fáciles
de implementar. Las nuevas versiones CSS3 y HTML5 nos ahorran más código.
Recuerden incluir el archivo en el head en este caso “zocial.css”. Para ponerle
un enlace al botón le agregar la etiqueta a Así:
Sign in with Facebook.