Creación Web

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

Descubre cómo disponer de una fuente gratuita con más de 400 iconos de todo tipo y cómo usarlo tanto en tu web como en tu escritorio.

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 - piopíalo    ”. 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 - piopíalo    . 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!

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado. Alumno del Postgrado de Growth Hacking por IEBS.

Ahora es tu momento

*

20 comentarios

  • Pues tengo instalado el Vcgs Toolbox, así que sin duda activaré esta funcionalidad, porque estoy como loca con el piopialo y no he visto más cosas que trae el paquete completo :-))
    El microcuento, conmovedor, con su principio, nudo y desenlace, jejeje..
    Muy buen post, Victor, ligerito y fácil de leer y sin duda, como soy friki-fan de tus buenas frases, en esta ocasión me quedo con “Si diseñas, diseñas y si programas, programas. Así que primero diseña y luego programa” …:-)
    Por cierto, para cuándo nos vas a dar más pistas de lo que te traes entre manos…. Tuietevent… intrigadita estoy…
    Buenos días!!

    • Hola Ana!!

      Vas a conseguir que en cada post busque esa frase friki y si no no lo publico. Gracias!

      Sobre TuitEvent debería escribir un post en breve… Te echaré la culpa de escribirlo!! 🙂

  • #Bolboreta ya ha metido algún que otro icono; pero no te puedo decir cómo lo ha hecho.

    Aprovecho para comentarte que hemos propuesto una comunidad de aprendizaje para papis en Blogramé (comunidad). Cuando puedas te pasas y nos dices cómo poner iconos bonitos en blog infantiles.

  • Hola Víctor,
    a ver si algún día puedo probar estar cosas que comentas, que están genial. Pero jo, es que son tantas que me quedaría sin horas 🙂
    Y ahora lo más importante, que todo el mundo se entere de que es tu compleaños!!! FELICIDADES!!!
    Un buen día de cumpleaños es el viernes!!! Que cumplas miles y que lo veamos por aquí.
    Un abrazo bien fuerte!!!

    • Víctor, Carolina ha empezado por aquí y yo por Twitter. Ríndete: Hoy tienes que ser feliz!!!

    • Hola Carolina!!!

      Efectivamente ha sido mi cumple!!! La celebración no ha llegado por circunstancias cosa que lo hace más especial. Un día te felicitan y te dan algún regalo y a los x días te vas de cenica a celebrarlo… Yujuuuu!!!

      Pues eso Carolina, que tu tranquila si no puedes probarlo todo. Yo opino que las cosas deben estar aparcadas hasta que las necesites. Lo mejor es saber que existe y, si algún día te encuentras con la necesidad, pues vuelves y lo aplicas.

      Abrazacos y gracias por la felicitación!

  • Hombre #jerby que es eso que se rinda y sea hoy feliz? Hoy tiene que ser un poco mas feliz que los demás días…ese objetivo number one, antes de poner un pie en el suelo y lavarnos la cara….y si alguien anda de capa caída, que pase por la comunidad Blograme, que le damos una cura de compañía, alegría y buen rollo. 😉 Felicidades Víctor.

    • Toma ya que bueno este comentario… Gracias Marisol!!!

      Pues eso, a quien se le caiga la capa que se pase por Blogramé (yo puedo corroborarlo) y se dé una sobre dosis de buen rollo!!! 🙂

  • Felicidades, Víctor…
    Ya ves. Aquí estamos. Asaltando tu blog en el día de tu cumple.
    Espero que pases un día feliz y que el resto de días del año sean mejores que el anterior…
    Creo que me he liado, pero se me acaba de pegar tu vicio de no borrar lo escrito

    • Jajajajajajaja. Mal vicio ese. Verás como al final te lleva a buen puerto, pero el camino es feo.

      Muchísísísísímas gracias por invadir mi blog en el día de mi cumple y hacerlo más vivo de lo que yo puede hacerlo.

      Sois lo mejor!

  • Buenos Días, Victor

    !! FELICIDADES ¡¡

    Siempre te leo a través de la newsletter y sinceramente no aparezco mucho por los comentarios, pero hoy… hoy la ocasión lo merecía.

    Hemos recibido la orden (ja.ja) de la comunidad blogramera de inundarte de buenas vibraciones por tu cumpleaños ” Felicidades”

    Me gusta mucho leerte así que no se te suba el éxito de hoy a la cabeza ja.ja (es broma)

    1 saludo

    • Jajajajajaja. Crack lo has clavado!!! Precisamente hoy publico algo muy relacionado con lo de “el éxito a la cabeza”. Odio que me pase y, aunque reconozco que a veces es inevitable, me pongo de los nervios!

      Pero eso es otro rollo. Lo importante es que me has felicitado y me ha hecho muchísima ilusión. Los de la comunidad Blogramé sois la caña!!!

  • Pues parece que me lees el cerebelo chacho jajaja. Yo soy de las que sé usar mogollón de herramientas y luego no hago post jajja. Otra premisa para este año ayayaayaya. Pues nada que has hecho un pleno al 15 buscaba iconos para mis correos y hago chas y apareces como la canción.
    Abrazosssss

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR