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

como usar los iconos de font awesome en tus archivos

Los iconos de Font Awesome son un conjunto de más de 600 iconos vectoriales que aumenta cada día. Puedes añadirlos a tus archivos tratándolos de la misma forma que cualquier otra fuente de texto.

Te permiten dar personalidad a tus textos y presentaciones y es un recurso gratuito muy de moda usado por todos los diseñadores.

Si te preguntas como consiguen esos iconos tan chulos para las webs las respuesta es que están creados a partir de una fuente de iconos como esta.

Varios iconos de Font Awesome

Usar los iconos de Font Awesome

Antes de usar los iconos de Font Awesome debes tener instalada la fuente en tu sistema operativo. Para ello puedes descargarla de se página Font Awesome.

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. Podrás usarlos también en Photoshop 😉

Descarga de la fuente de iconos

Para la descarga de la fuente de iconos Font Awesome nos dirigimos a su página oficial fontawesome.io.

En el menú de navegación superior busca Get Started.

Menú de acceso a la descarga de iconos Font Awesome
Te dará acceso a la página donde un poco más abajo está el botón de descarga.

Botón para la descarga de iconos Font Awesome
El archivo descargado será un .zip que tendrás que descomprimir. Dentro de la carpeta encontrará otras carpetas que en este caso no hacen falta. Como ese contenido es para su uso en páginas web, ve directo/a a la carpeta fonts y entra en ella.

Carpeta de iconos de Font Awesome
El archivo que nos interesa es FontAwesome.otf.

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

El sistema más rápido para instalar una fuente es poner el cursos sobre el archivo y clicar con el botón secundario. Se mostrará la opción de instalación automática.

Instalar la fuente de iconos Font Awesome

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.
  • Pega el archivo FontAwesome.otf

Instalación de los iconos de Font Awesome

Ya tienes disponible la última versión de la fuente de iconos. Recuerda que se actualiza periódicamente con nuevos iconos. O sea que deberás actualizarla de vez en cuando.

Iconos Font Awesome. Truco para uso rápido

Una vez tienes la fuente instalada en el sistema operativo solo hay que entrar a esta página, copiar el icono que te gusta y pegarlo después en tu archivo. De esta forma evitarás tener que investigar que icono corresponde a cada letra.
Cómo copiar un icono de Font Awesome

Hazlo igual que como pegarías cualquier otro texto. Copia solo el icono y no el código que lo acompaña.
seleccionar iconos de font awesome para tus archivos
Si al pegar el icono te queda un “cuadradito” en el texto es porque tienes seleccionada otra fuente en el programa, y esa fuente no va a reconocer los iconos.

X ejemplo de icono de Font Awesome no reconocido

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 sin que pierda 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!

¿Dónde utilizar los iconos?

Y ahora que ya sabes descargar a instalar los iconos de Font Awesome, te preguntarás dónde puedes utilizarlos. Estamos acostumbrados a verlos formando parte de un diseño 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 nosotros pretendemos usarlos en una presentación, un presupuesto o en un currículo y no queremos que necesariamente sea en una web.

En nuestros textos podemos utilizarlos exactamente de la misma forma en que utilizan los iconos en las página web o en un blog destacando un titular, presentando un contenido o como viñeta de una lista.

Como además por si solos los iconos ya aportan información visual, puedes incluso sustituir parte del texto haciendo más liviana la lectura y fijando la atención en los contenidos que de verdad importan.

Para ver lo que aporta esta fuente de iconos solo tienes que fijarte en esta lista de ejemplos:

Laptop

Gears

Pencil

No sé a ti pero a mí me gusta más cuando le ponemos iconos en vez de las viñetas estándar a las listas.

Imagina que además puedes aplicarle un color diferente.

ON – OFF

Tu currículo con iconos Font Awesome

Como ejemplo de uno de los múltiples usos que puedes dar a los iconos Font Awesome te muestro un currículo inventado, en el 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 las fuentes en tus trabajos también te puede venir bien descargar Google Fonts. Una biblioteca de fuentes disponible para todos y que es el complemento perfecto a los iconos de Font Awesome.

Con este artículo espero haber resuelto tus dudas. Pero si te he creado algunas nuevas puedes hacer uso del formulario de comentarios un poco más abajo. Por supuesto si te ha gustado el artículo compártelo en las redes sociales.

Si te ha gustado comparte

Información del 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.

Siguiente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*