Cuando estamos maqueteando un sitio web en Adobe XD o diseñando algún elemento en Photoshop, regularmente tratamos de incluir iconos que ayuden a generar una vista profesional de forma rápida en nuestros proyectos, por lo que mayoría de las personas tiende a descargar e implementar estos manualmente, lo cual se convierte en un proceso tardado y hasta tedioso.

Así que para evitar perder tiempo de forma “innecesaria” en algunos casos, te enseñare como instalar Font Awesome en tu computadora, ya que es una de las fuentes de iconos mas completas y profesionales que nos provee de cientos de estos de forma gratuita para poder escoger el que más se adapte a lo que estas implementando sin complicarte tanto la vida.
1.- DESCARGA:
  • El primer paso es dirigirnos a la página principal de Font Awesome, puedes hacerlo buscando su página por Google o mediante el siguiente enlace:
https://fontawesome.com/
  • Una vez dentro de su sitio web seleccionaremos en la parte superior el botón de Start.
  • Esto nos redireccionara a la siguiente página en la cual podremos notar múltiples opciones para descargar la fuente, como nosotros no necesitamos estas opciones y solo queremos instalar la fuente directamente en nuestra computadora buscaremos en la parte inferior la opción “Desktop” y le daremos clic.
  • En la siguiente página que nos arroja podemos notar el enlace para descargar la fuente, procederemos a dar clic a este y automáticamente iniciara la descarga de los archivos necesarios para su instalación.
2.- INSTALACIÓN
  • Una vez que haya finalizado la descarga podemos notar que nos proporciono un archivo .ZIP, procederemos a extraer este elemento dando clic derecho y seleccionando extraer aquí.
  • Hecho esto, accederemos a la directorio extraído en donde podremos observar multiples carpetas y archivos los cuales ignoraremos a excepción de la carpeta llamada “otfs” a la que accederemos dando doble clic.
  • Aquí podremos observar tres archivos los cuales nos funcionaran para instalar los distintos tipos de fuente (Brands, Regular, Solid ) que Font Awesome nos proporciona de forma gratuita.

  • El siguiente paso es dar clic derecho al primer archivo y seleccionar la opción de “instalar” o “instalar para todos los usuarios”, en caso de tener mas de uno.
  • Una vez hecho esto la primera fuente se habrá instalado de forma correcta así que  proseguiremos a realizar lo mismo con los últimos dos archivos de fuente restantes.

3.- PRUEBAS
  • Si nos vamos al gestor de fuentes de Windows y buscamos las palabras “Font Awesome”,  podremos notar que ya se encuentran correctamente instaladas estas nuevas fuentes.
  • Ahora solo nos queda verificar en Photoshop o Adobe XD que nuestras fuentes estén funcionando de forma correcta, para ello lo primero que haremos es dirigirnos a la pagina de Font Awesome y en la parte superior seleccionar el apartado de iconos.
  • Una vez hecho esto podremos observar en la parte izquierda algunos filtros los cuales nos servirán para conocer que tipo de fuente seleccionaremos en Photoshop o Adobe XD, en este caso marcaremos la opción Free ya que la fuente descargada esta en su versión gratuita y  como filtro adicional marcaremos la opción Brands lo que nos desplegara una lista de iconos a elegir.
  • Buscaremos el icono que mas nos agrade, en este caso yo usare el de Adobe y daré clic en este, lo cual nos desplegara la siguiente vista del icono, en el que podemos notar diferentes formas de usar este icono, para nuestro caso daremos clic sobre el icono directamente lo cual copiara este elemento a nuestro porta papeles, ahora lo único que restaría es probar que el icono funcione en nuestra aplicación.
  • Abriremos nuestro Adobe xd, Photoshop u otra aplicación y crearemos un nuevo proyecto, aquí colocaremos un campo de texto y con (clic derecho + pegar) o presionando (ctrl + v) pegaremos el icono previamente copiado, como podrán darse cuenta aparecerá un icono extraño que no se asemeja a lo que buscamos, esto es por que necesitamos seleccionar Font Awesome en nuestra lista de fuentes para este texto.
  • En este caso utilizamos un icono de tipo Brand, por lo que de nuestra lista de fuentes seleccionaremos la opción “Font Awesome Brands”, al hacer esto nuestro icono de Adobe se mostrara de forma correcta confirmando que la instalación de la fuente se realizo de forma correcta.
Esperamos que les haya funcionado este pequeño tutorial, cualquier duda o comentario no duden en escribirla