La utilización de tipos de letras para mostrar iconos de cualquier tipo (redes sociales, acciones, informativos, etc) es una práctica muy recomendable por muchos motivos y sobre todo facilita enormemente la tarea de de cualquier diseñador web. Además existen una enorme variedad de fuentes de iconos por lo que puedes utilizar distintos estilos para distintos proyectos.
A lo largo de este post intentaré explicar cómo trabajar con webfonts o iconfonts, recursos desde donde podemos descargarlos (leed antes las licencias de uso), cómo instalarlos y algunos ejemplos sencillos de utilización.
Ventajas
Como dije antes es una buena práctica que tiene repercusiones positivas en distintas facetas del proyecto:
- Mejora la velocidad de carga de nuestro site. Además la implementación es muy sencilla, pudiendo utilizar incluso un CDN para albergar los ficheros. En caso de Font Awesome los ficheros a descargar oscilan entre 40 kB y 200 kB. Además cualquier mejora en la velocidad redundará positivamente sobre el SEO.
- Los tipos vectoriales son escalables y en general se ven mucho mejor que los iconos en imagen. Esto presenta grandes ventajas sobre todo en Responsive Design y trabajando con pantallas con una elevado PPP como las Retina Display.
- Sencillo mantenimiento. Generalmente en diseño cualquier cambio de color, sombreados, etc nos obliga a acudir a GIMP, Photoshop o Illustrator (o cualquier otro) para realizar las modificaciones y volver a generar la imagen para incluirla en el proyecto. Es mucho más efectivo trabajar con CSS y apreciar de inmediato los cambios.
- Por medio del CSS puedes cambiar la apariencia general de todos los iconos con unas pocas modificaciones. Aunque en la actualidad se trabaja con sprites (ver post anterior) con frecuencia no deja de ser molesto.
- Dado que todo está realizado en código CSS y clases, si utilizas algún software de control de versiones siempre puedes volver a un momento anterior del diseño.
Iniciando el ejemplo: obtener Font Awesome
Para comprender esta sencilla técnica utilizaremos Font Awesome. Es una fuente de iconos diseñada para el framework Bootstrap, pero que se puede utilizar en cualquier otro entorno. Se distribuye bajo la Open Font License (OFL) por lo que podremos incluirla en nuestros diseños y proyectos con total tranquilidad. Si teneis alguna duda aquí teneis las FAQ de la licencia.
Podemos incluir Font Awesome de diferentes modos en nuestro proyecto. En esta ocasión optaremos por el más sencillo, que es incluir una sencilla linea en el head de nuestro HTML.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> |
Personalmente prefiero alojar las webfonts en un servidor propio, dado que ello te permite por un lado trabajar sin necesidad de Internet (¿es posible?) o evitar posibles caidas o latencias del CDN. Por supuesto se puede implementar con el CSS de cualquier proyecto con LESS y SASS (siempre recomendable). Tienes muchas formas distintas de trabajar y eso me gusta.
El código HTML
Así pues ya podemos comenzar con un sencillo ejemplo de iconos bastante conocidos por todos. Aquí tenéis el código:
<!doctype html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Ejemplo de iconos sociales</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="icons.css"> </head> <body> <ul class="icons-shadow"> <li><i class="fa fa-android fa-5x"></i></li> <li><i class="fa fa-facebook-square fa-5x"></i></li> <li><i class="fa fa-flickr fa-5x"></i></li> <li><i class="fa fa-foursquare fa-5x"></i></li> <li><i class="fa fa-google-plus-square fa-5x"></i></li> <li><i class="fa fa-github-square fa-5x"></i></li> <li><i class="fa fa-instagram fa-5x"></i></li> <li><i class="fa fa-linkedin-square fa-5x"></i></li> <li><i class="fa fa-pinterest-square fa-5x"></i></li> <li><i class="fa fa-rss-square fa-5x"></i></li> <li><i class="fa fa-skype fa-5x"></i></li> <li><i class="fa fa-stack-overflow fa-5x"></i></li> <li><i class="fa fa-tumblr-square fa-5x"></i></li> <li><i class="fa fa-twitter-square fa-5x"></i></li> <li><i class="fa fa-vimeo-square fa-5x"></i></li> <li><i class="fa fa-youtube-square fa-5x"></i></li> <ul> </body> </html> |
El código CSS
Como podéis comprobar hemos incluido un fichero CSS icons.css que va a ser donde incluyamos los correspondientes estilos de los iconos. Podréis ver que incluye un estilo genérico que aporta un leve sombreado al icono para destacarlo del resto y cada icono cuenta con su color corporativo.
/* Generic */ li { list-style-type: none; float: left; margin: .25em; } i { margin: .25em; } /* Icons shadow */ .icons-shadow i { text-shadow: .025em .025em #ccc; } /* Colors */ .icons-shadow .fa-android { color: #a4c639; } .icons-shadow .fa-facebook-square { color: #3b5998; } .icons-shadow .fa-flickr { color: #0063dc; } .icons-shadow .fa-foursquare { color: #25a0ca; } .icons-shadow .fa-google-plus-square { color: #db4a39; } .icons-shadow .fa-instagram { color: #3f729b; } .icons-shadow .fa-linkedin-square { color: #0e76a8; } .icons-shadow .fa-pinterest-square { color: #c8232c; } .icons-shadow .fa-rss-square { color: #ee802f; } .icons-shadow .fa-skype { color: #00aff0; } .icons-shadow .fa-stack-overflow { color: #f67a00; } .icons-shadow .fa-tumblr-square { color: #34526f; } .icons-shadow .fa-twitter-square { color: #00a0d1; } .icons-shadow .fa-vimeo-square { color: #86c9ef; } .icons-shadow .fa-youtube-square { color: #c4302b; } |
Visualización en el navegador
Una vez incluido el anterior código obtendrás en tu navegador algo similar a esto:
Como podeis apreciar es un ejercicio muy sencillo y que tiene un montón de ventajas. Por supuesto siempre podemos enriquecer el diseño con nuevos efectos. Probemos ahora a darles un efecto 3D.
Efecto 3D
Para ello crearemos una nueva lista con una nueva clase CSS y poder aplicar limpiamente los estilos. Para ello necesitaremos utilizar una propiedad CSS que de momento sólo está disponible en navegadores basados en WebKit (Chrome y Opera). Nos ocuparemos del resto de navegadores realizando un fallback con el atributo color: y se muestre el icono con el color corporativo sin efecto. Lo podréis comprobar en el código CSS.
Realizaremos un gradiente de color en el icono que le dará un efecto 3D a nuestro icono. Para calcular un tono 40% más oscuro que el color de cada icono podeis utilizar vuestro programa favorito de edición, un mixin si estais utilizando LESS/SASS o una herramienta online como el Color Picker de W3Schools.
Añadimos una nueva lista de iconos a nuestro HTML:
<ul class="icons-3d"> <li><i class="fa fa-android fa-5x"></i></li> <li><i class="fa fa-facebook-square fa-5x"></i></li> <li><i class="fa fa-flickr fa-5x"></i></li> <li><i class="fa fa-foursquare fa-5x"></i></li> <li><i class="fa fa-google-plus-square fa-5x"></i></li> <li><i class="fa fa-github-square fa-5x"></i></li> <li><i class="fa fa-instagram fa-5x"></i></li> <li><i class="fa fa-linkedin-square fa-5x"></i></li> <li><i class="fa fa-pinterest-square fa-5x"></i></li> <li><i class="fa fa-rss-square fa-5x"></i></li> <li><i class="fa fa-skype fa-5x"></i></li> <li><i class="fa fa-stack-overflow fa-5x"></i></li> <li><i class="fa fa-tumblr-square fa-5x"></i></li> <li><i class="fa fa-twitter-square fa-5x"></i></li> <li><i class="fa fa-vimeo-square fa-5x"></i></li> <li><i class="fa fa-youtube-square fa-5x"></i></li> </ul> |
Y añadimos una nueva clase y atributos a nuestro CSS para la nueva lista:
.icons-3d .fa-android { color: #a4c639; /* Fallback other browsers */ background: -webkit-linear-gradient(#a4c639, #738B28); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-flickr { color: #0063dc; /* Fallback other browsers */ background: -webkit-linear-gradient(#0063dc, #003B84); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-foursquare { color: #25a0ca; /* Fallback other browsers */ background: -webkit-linear-gradient(#25a0ca, #166079); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-google-plus-square { color: #db4a39; /* Fallback other browsers */ background: -webkit-linear-gradient(#db4a39, #832C22); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-github-square { color: #000; /* Fallback other browsers */ background: -webkit-linear-gradient(#444, #000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-instagram { color: #3f729b; /* Fallback other browsers */ background: -webkit-linear-gradient(#3f729b, #26445D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-linkedin-square { color: #0e76a8; /* Fallback other browsers */ background: -webkit-linear-gradient(#0e76a8, #084765); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-facebook-square { color: #3b5998; /* Fallback other browsers */ background: -webkit-linear-gradient(#3b5998, #23355B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-pinterest-square { color: #c8232c; /* Fallback other browsers */ background: -webkit-linear-gradient(#c8232c, #78151A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-rss-square { color: #ee802f; /* Fallback other browsers */ background: -webkit-linear-gradient(#ee802f, #8F4D1C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-skype { color: #00aff0; /* Fallback other browsers */ background: -webkit-linear-gradient(#00aff0, #006990); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-stack-overflow { color: #f67a00; /* Fallback other browsers */ background: -webkit-linear-gradient(#f67a00, #666 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-tumblr-square { color: #34526f; /* Fallback other browsers */ background: -webkit-linear-gradient(#34526f, #1F3143); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-twitter-square { color: #00a0d1; /* Fallback other browsers */ background: -webkit-linear-gradient(#00a0d1, #00607D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-vimeo-square { color: #86c9ef; /* Fallback other browsers */ background: -webkit-linear-gradient(#86c9ef, #50798F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d .fa-youtube-square { color: #c4302b; /* Fallback other browsers */ background: -webkit-linear-gradient(#c4302b, #761D1A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Si refrescáis ahora la página en vuestro Google Chrome u Opera Browser vereis los iconos con la siguiente apariencia:
Como veis aparece un sombreado que le da apariencia de 3D. Bueno, parece que ahora lo que sería interesante es fundir estos dos efectos en un sólo icono, ¿no es así? Vamos allá.
Fusionando efectos
Para ello deberemos de utilizar un truco dado que no podemos aplicar todas las propiedades a un sólo tipo de fuente. Para ello aprovecharemos la funcionalidad que nos aporta la implementación CSS de Font Awesome que hace realmente fácil apilar iconos. Incluiremos dos iconos dentro de un tag <span> para utilizar uno como foreground y otro como background o sombra.
Como en anteriores ocasiones introduzcamos una nueva lista con nuevo código:
<ul class="icons-3d-shadow"> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-android front"></i> <i class="fa fa-android shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-facebook-square front"></i> <i class="fa fa-facebook-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-flickr front"></i> <i class="fa fa-flickr shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-foursquare front"></i> <i class="fa fa-foursquare shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-google-plus-square front"></i> <i class="fa fa-google-plus-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-github-square front"></i> <i class="fa fa-github-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-instagram front"></i> <i class="fa fa-instagram shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-linkedin-square front"></i> <i class="fa fa-linkedin-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-pinterest-square front"></i> <i class="fa fa-pinterest-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-rss-square front"></i> <i class="fa fa-rss-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-skype front"></i> <i class="fa fa-skype shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-stack-overflow front"></i> <i class="fa fa-stack-overflow shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-tumblr-square front"></i> <i class="fa fa-tumblr-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-twitter-square front"></i> <i class="fa fa-twitter-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-vimeo-square front"></i> <i class="fa fa-vimeo-square shadow"></i> </span> </li> <li> <span class="fa-stack-5x fa-5x"> <i class="fa fa-youtube-square front"></i> <i class="fa fa-youtube-square shadow"></i> </span> </li> </ul> |
Y ahora nuevamente incluimos otro fragmento de CSS a incluir en el fichero de estilos.
.icons-3d-shadow i.shadow { position: relative; left: .025em; top: .025em; color: #999; } .icons-3d-shadow i.front { position: absolute; z-index: 1; } .icons-3d-shadow .fa-android.front { color: #a4c639; /* Fallback other browsers */ background: -webkit-linear-gradient(#a4c639, #738B28); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-flickr.front { color: #0063dc; /* Fallback other browsers */ background: -webkit-linear-gradient(#0063dc, #003B84); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-foursquare.front { color: #25a0ca; /* Fallback other browsers */ background: -webkit-linear-gradient(#25a0ca, #166079); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-google-plus-square.front { color: #db4a39; /* Fallback other browsers */ background: -webkit-linear-gradient(#db4a39, #832C22); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-github-square.front { color: #000; /* Fallback other browsers */ background: -webkit-linear-gradient(#444, #000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-instagram.front { color: #3f729b; /* Fallback other browsers */ background: -webkit-linear-gradient(#3f729b, #26445D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-linkedin-square.front { color: #0e76a8; /* Fallback other browsers */ background: -webkit-linear-gradient(#0e76a8, #084765); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-facebook-square.front { color: #3b5998; /* Fallback other browsers */ background: -webkit-linear-gradient(#3b5998, #23355B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-pinterest-square.front { color: #c8232c; /* Fallback other browsers */ background: -webkit-linear-gradient(#c8232c, #78151A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-rss-square.front { color: #ee802f; /* Fallback other browsers */ background: -webkit-linear-gradient(#ee802f, #8F4D1C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-skype.front { color: #00aff0; /* Fallback other browsers */ background: -webkit-linear-gradient(#00aff0, #006990); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-stack-overflow.front { color: #f67a00; /* Fallback other browsers */ background: -webkit-linear-gradient(#f67a00, #666 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-tumblr-square.front { color: #34526f; /* Fallback other browsers */ background: -webkit-linear-gradient(#34526f, #1F3143); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-twitter-square.front { color: #00a0d1; /* Fallback other browsers */ background: -webkit-linear-gradient(#00a0d1, #00607D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-vimeo-square.front { color: #86c9ef; /* Fallback other browsers */ background: -webkit-linear-gradient(#86c9ef, #50798F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons-3d-shadow .fa-youtube-square.front { color: #c4302b; /* Fallback other browsers */ background: -webkit-linear-gradient(#c4302b, #761D1A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Podeis comprobar cómo ahora distinguimos entre dos nuevas clases .front y .shadow para diferenciar las dos capas. Si refrescais vuestro navegador este será el resultado en Google Chrome u Opera. En el resto como ya comentamos antes simplemente vereis los iconos de forma muy similar a la primera implementación.
Conclusión
Bueno creo que habeis podido comprobar cómo es muy sencillo realizar una implementación de iconos sin utilizar imágenes o sprites y las ventajas que aporta tanto al diseño como a la optimización de recursos. De hecho no han sido mas que unos pocos ejemplos con técnicas muy sencillas. Con la experimentación seguro que encontrareis nuevos efectos que implementar con el uso de CSS y la combinación de iconos.
Espero haya sido de utilidad y se agradecerán comentarios.
Recursos con webfonts
Os dejo una breve lista de websites con recursos para utilizar. Por supuesto cientos de recursos para investigar.
- We Love Icon Fonts: http://weloveiconfonts.com/
- Foundation Icon Fonts: http://zurb.com/playground/foundation-icon-fonts-3
- Fontello Icons Fonts Generator: http://fontello.com/
Fuentes
http://www.flatui.net/social-colors/
http://css-tricks.com/snippets/css/gradient-text/
http://www.w3schools.com/tags/ref_colorpicker.asp
Autor:
Última actualización:
De donde sale //netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css ?
La verdad nunca me avive de darle color a las fuentes o degradado jajaja. Gracias.
En la web de Font Awesome podrás encontrar toda la información necesaria para incluir la fuente en tus proyectos: http://fontawesome.io/get-started/. De igual modo que los ejemplos están realizados con esta fuente puedes aplicar el efecto a cualquier otra. Un saludo y gracias por tu comentario.
Hola Mucho Gusto… Mientras uno pueda encontrar informacion tan clara y concreta haremos de un mundo mejor.. simpre positivo… gracias por el aporte…
¿Cómo puedo agregar iconos propios?
Puedes consultar este otro post donde explico cómo crear tu propia webfont.