Contenido actualizado a fecha: 13 febrero 2020
Los iconos de Font Awesome son un conjunto de cerca de 3.000 iconos vectoriales, que en este momento dispone de una colección de más de 1.000 iconos gratis y casi 2000 en su versión Pro.
La ventaja de estos iconos frente a otros, es que puedes añadirlos a tus archivos «tratándolos igual que cualquier otra fuente de texto». Con lo que podrás personalizar tus textos con iconos prefabricados, aportándoles un estilo similar al de los diseñadores gráficos profesionales.
Si te has estado preguntando cómo se consiguen esos iconos tan chulos para las decorar páginas web o presentaciones, la respuesta es que están creados a partir de fuentes de iconos como esta.
Usar los iconos de Font Awesome
Antes de usar los iconos de Font Awesome hay que instalar la fuente en tu sistema operativo. Para ello puedes descargarla desde su página oficial fontawesome.com.
Se instala igual que una fuente normal y se usa de la misma manera. Seleccionando la fuente, por ejemplo en el documento de Word que estés redactando en ese momento.
Una vez instalada la tendrás disponible para todos tus programas de tratamiento de textos o de diseño gráfico. Cómo no, podrás usar los iconos también en Photoshop 😉
Descargar la fuente de iconos Font Awesome
Para descargar la fuente de iconos Font Awesome nos dirigimos a su página oficial Font Awesome.
Pulsa sobre el botón Download Free para que comience la descarga.
El archivo descargado será un .zip que tendrás que descomprimir. Dentro de la carpeta encontrarás otras que en este caso no necesitamos. Ese contenido es para utilizar los iconos en páginas web o darles un uso más profesional.
Tú ve directo/a a la carpeta use-on-desktop y entra en ella.
Recibe nuevos artículos mensualmente
y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.
Instalación de los iconos Font Awesome
El sistema más rápido para instalar cualquier tipo de fuente es poner el cursor sobre el archivo y clicar con el botón secundario. Se mostrará la opción de instalación automática.
Si Windows no te da la opción de instalar de forma automática puedes hacerlo siguiendo estos pasos.
- Clic en el icono INICIO de Windows (en la barra de herramientas de Windows).
- Escribe el comando %windir%\fonts.
- Clic sobre la carpeta Fonts para abrirla.
- Pega cada uno de los archivos de la fuente de iconos dentro de la carpeta.
Ya tienes disponible la última versión de la fuente de iconos en tu ordenador. Pero recuerda que la actualizan periódicamente, y si no te quieres perder los nuevos iconos, tú también deberás actualizar a la última versión de Font Awesome de vez en cuando.
Iconos Font Awesome. Truco para uso rápido
Una vez tengas la fuente instalada es tan sencillo como entrar en esta página (el cheatsheet u hoja de trucos), copiar el icono que te gusta y pegarlo después en tu archivo.
Hazlo de la misma forma en que copiarías y pegarías cualquier otro texto. Copia solo el icono del cheatsheet (página de trucos) y no el código que lo acompaña.
Para solucionarlo selecciona el icono y asígnale la fuente de iconos Font Awesome. Deberías estar viendo el icono en tu texto.
Evidentemente al ser una fuente de texto, puedes darle el tamaño y color que prefieras a los iconos sin que pierdan nada de calidad.
Diferencias entre la versión gratuita y la de pago de los iconos
Además de que existen iconos exclusivos para la versión Pro, algunas variantes no están disponibles en la versión gratuita. Por ejemplo, el icono de la calavera solo es gratuito con el aspecto Solid.
Desde esta variante puedes realizar diferentes acciones como se indica en la imagen:
- Copiar el HTML para incluirlo en tu página web.
- Copiar el ICONO, como lo hemos hecho desde el cheatsheet.
- Descargar el icono en formato SVG, para modificarlo en modo vectorial.
- Copiar el código UNICODE, que es un coñazo usarlo.
Todas las opciones en la versión gratuita son de libre uso con excepción del formato SVG, como podemos leer al iniciar la descarga:
Las variantes de pago de este mismo icono las encontrarás en su versión Regular y Light, que verás en la barra de la derecha. En cuanto pulses sobre alguna de las opciones observarás que algo cambia. Permite descargar lo mismo que antes pero desaparece la opción de SVG.
Por mucho que pruebes a copiar y pegar el icono como has hecho anteriormente, solo se mostrará el icono en su formato gratuito.
¿Dónde utilizar los iconos?
Ahora que sabes descargar e instalar los iconos de Font Awesome, te preguntarás dónde utilizarlos.
Estamos acostumbrados a verlos en páginas web; como elementos visuales, adelantando un contenido posterior o implementados en las llamadas a la acción.
Nuestro caso es distinto porque queremos usar los iconos en presentaciones, presupuestos o en un currículo, y no necesariamente en una web. Aunque la finalidad será la misma: destacar un titular, presentar un contenido o como viñeta de una lista.
Como además por sí solos los iconos aportan información visual, puedes incluso sustituir parte del texto, haciendo más liviana la lectura y fijando la atención en los contenidos importantes.
No sé a ti, pero a mí me gusta más cuando le ponemos iconos a las listas en vez de las típicas viñetas.
Laptop
Gears
Pencil
Imagina que además puedes aplicar colores diferentes a cada uno.
ON – OFF
Tu currículo con iconos Font Awesome
Como ejemplo de uno de los múltiples usos que puedes dar a los iconos de Font Awesome, te muestro una plantilla de currículo en la que solo usando esta fuente de iconos ya se ha destacado el contenido.
Si te interesa personalizar el tipo de letra de tus proyectos, te vendrá bien descargar las fuentes gratuitas de Google. Una biblioteca que supone el complemento perfecto para los iconos de Font Awesome y que además puedes utilizar con programas instalados o en diseño de páginas web.
Espero haber resuelto tus dudas. Aunque si he conseguido crearte otras nuevas, usa el formulario de comentarios para hacer tus preguntas.
Por supuesto, si te ha gustado este artículo compártelo en las redes sociales 😉
Si te ha gustado comparte
About the Author
