¿Cómo usar los iconos de Font Awesome en tus archivos?

Cómo usar la fuente de iconos de font awesome versión 5 en tus archivos

Ernesto BarrachinaDiseño GráficoDeja tu comentario

Contenido actualizado el: 1 julio 2018

¿Cómo usar los iconos de Font Awesome en tus archivos?
5 (100%) 6 votos

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 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.

La colección de iconos Font Awesome va en aumento

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.

Descargar la fuente de iconos Font Awesome con un solo click

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.

Abre la carpeta fonts, para instalar los iconos de Font Awesome en tu sistema operativo

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.

Instala la fuente de iconos Font Awesome

Puedes ahorrar tiempo seleccionando los tres archivos, e instalándolos de forma simultánea.

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.

Instalación de los iconos de Font Awesome

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.

Cómo copiar un icono desde el cheatsheet de la página Font Awesome

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.

Seleccionar los iconos Font Awesome desde su hoja de trucos o cheatsheet

Si al pegar el icono te queda un «cuadradito» X en el texto es porque tienes otro tipo de letra seleccionada en el programa, y esa fuente no va a reconocer los iconos.

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.

Imagen banner diseño web valencia

Construimos

Tu Marca

Si necesitas ayuda con tu proyecto de diseño gráfico no tienes más que decirlo.

Solicitar un Presupuesto!

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.

Icono Font Awesome en su versión gratuita

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:

«Al usar este formato se debe dar el crédito apropiado, proporcionarse un enlace a la licencia e indicar si se realizaron cambios. Puede hacerlo de cualquier manera razonable, pero no de ninguna que sugiera que el licenciante te respalda a a ti o a su uso».

Si usas o modificas los iconos en la versión SVG debes atribuir al autor

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.

Icono Font Awesome en su versión de pago

Por mucho que pruebes a copiar y pegar el icono como has hecho anteriormente, solo se mostrará el icono en su formato gratuito.

No tienes instalada la fuente que te proporcionan con el pago de la licencia y la gratuita no reconoce el estilo.

¿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.

Uso de Font Awesome en el diseño web

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.

Currículo en el que se ha utilizado Font Awesome

Si te interesa personalizar el tipo de letra de tus proyectos, te vendrá bien descargar las fuentes gratuitas de Google. Una biblioteca disponible para todos y que es el complemento perfecto a los iconos de Font Awesome.

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

Más sobre el autor

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Lo hacemos?

« Siguiente

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.