Cómo usar iconos de FontAwesome en tus Diseños

En este post con vídeo te cuento cómo puedes instalar y utilizar la fuente de iconos libres FontAwesome en tus programas de diseño.

Una, dos, cuatro y media, cinco quince, seis ... ¡Anda que estás ahí! ¡Hola! Perdona, estaba casi durmiéndome delante de la pantalla contando las veces que la peque se ha despertado está noche. Pobrecilla, esta malita, con moquitos y fiebruchiscuquisquilla arripitinqui (que tonticos nos ponemos cuando hablamos de bebés, ¿no te pasa a ti?). Pero bueno, seguro que pronto está mejor.

¿Tú que tal? ¡Espero que bien! Ya sabes que mis posts suelen requerir de mucha energía y concentración, ¿verdad? ¡Pues hoy no! Macachesenlamar, que estoy cansadito. ¿Ponemos un truquito sencillo? ¿Te ape?

FontAwesome: Una fuente de iconos web gratuitos

Antes de empezar a contarte el truco, quiero presentarte, por si no lo conocías, el proyecto FontAwesome. Es una librería de un montón de iconos, de muchos tipos, para que puedas usarlos en cualquier proyecto web.

Lo bonito de esto es que, con solo una línea de código que tienes que agregar en la cabecera de tu web, tienes disponibles todos los iconos y sin límite de tamaño y sin cargar la web de imágenes. ¿Me sigues?

La instalación es súper sencilla pero, si tienes instalado mi plugin Vcgs Toolbox, es aún más. Sólo tienes que activar la opción de Font Awesome en las opciones. ¡Así de sencillo!

Iconos Webs en tus diseños y Mockups

Ea, con el dedillo otra vez. Yo tengo un mockup, mockup, mockup, que me lo saco pockup a pockup. ¿Te acuerdas cuando te hablé de cómo hacer un Mockup para tu web?

Pues bien, yo es algo que siempre hago antes de pasarle la web al equipo de programación y que sepas que tiene muchas ventajas. Una que he descubierto hace poquito, pa que tu veas que uno no termina nunca de descubrir cosas (y si no que se lo digan a mi vecina que el otro día se encontró con un trozo de pan en su terraza... que fuerte, luego te lo cuento), es que cuando planteas una web con el programa de diseño prestas más atención al mensaje, la estructura y la conversión que si te pones a hacerla directamente.

¿Me he explicado? Esto en piopiable sería algo así como "Si diseñas, diseñas y si programas, programas. Así que primero diseña y luego programa - piopialo ". Porque cuando diseñas prestas más atención a la estética y colocas los elementos con más libertad, buscando que encajen en la composición de la página y a su vez cumplan con tus objetivos. ¿Bien?

Pues, volviendo al tema de hoy, si planeas hacer una web utilizando iconos de FontAwesome, lo lógico es que puedas usarlos en tu programa de diseño. ¿No es así?

Pues conseguirlo es muy sencillo:

• Descarga el paquete de FontAwesome desde su página oficial. Una vez descargado, sólo tienes que descomprimirlo y entrar en la carpeta fonts donde tendrás la fuente en varios formatos para instalar en tu ordenador.
• Con la fuente instalada, para agregar iconos, deberás visitar esta página para localizar el que necesitas y copiarlo (con ctrl+c) para ir a tu programa de escritorio y pegarlo.
• Al pegarlo es posible que aparezca un cuadrito raro. No te preocupes, selecciónalo y cambia su tipo de letra a "Font Awesome".

¡Ya está! Así explicado parece difícil pero no lo es para nada. Puedes mirar el vídeo de 4 minutos (Dios!!! Yo haciendo vídeos de 4 minutos!!) que acompaña este post y verás que es coser y cantar (como si coser fuera fácil).

Un micro-cuento basado en hecho real

Un poquito más arriba te lo he prometido: te iba a contar cómo un trozo de pan acabó en la terraza de mi vecina - piopialo . Así que ahí va. Pero si no te va el marujeo (si si, y yo que me lo creo) puedes ir directamente a las preguntas finales o dejar un comentario.

Pos resulta que estaba yo con Marina mirando por la ventana (la que está justo encima de la terraza, de ella) porque enfrente hay unos tejados a nuestra altura donde los pajaritos van y vienen. "Miiiiira Marina, los pajaritos... ¿qué hacen los pajaritos? Pio pio pio (todo esto molaría haberlo incluido en el vídeo).". A todo esto que yo, que desde que soy papi me emociono con cada cosa nueva que descubre esta personita y me entrego por completo a la labor de descubrirle nuevas cada día, tengo mi genial ocurrencia: " ¿Le echamos pan a los pajaritos? ¿Quieres ver cómo comen los pajaritos? Andaaaaa, mira que pajaritos, ¿qué hacen los pajaritos? Pio pio pio)"...

Ya te digo, basado en hecho real. Mejor no sigo, sólo decirte que yo de dedicación voy bien, pero de puntería ... Ya sabes lo que pasó, ¿verdad? Eeee, eso sí, con mis [ ] y mi hija a cuestas bajé, llamé a su timbre y le expliqué lo ocurrido. Ella, atónita, concluyó: "aquí tengo panecillos, ¿quieres?".

¡Pues ya está! Ahora si... ¿Conocías FontAwesome? ¿Lo utilizas? ¿Conocías la posibilidad de usar esos iconos en tus diseños? ¿Sabes que puedes usarlo incluso en tus presentaciones? ¿Alguna alternativa? ¡Cuenta cuenta!