/ Framework

Incluir Iconos de Font Awesome en Diseños de Adobe Fireworks

Muchas veces necesitamos incluir iconos comunes o populares de Internet en nuestros diseños de maquetas web, para solventar esta tarea hoy vamos a aprender como incluir iconos de Font Awesome en nuestros diseños de Adobe Fireworks y así estaremos ahorrándonos valioso tiempo.

Bueno continuando vamos a realizar un ejercicio de como incluir iconos del framework Font Awesome, en nuestro diseño realizado en Adobe Fireworks en una maquina con Sistema Operativo Windows.

Cabe mencionar que este mismo método funciona para Adobe Photoshop, Adobe Illustrator, entre otros.


Descargar Font Awesome

Lo primero que tenemos que hacer es descargar el framework Font Awesome de su página oficial, como tiene que ser 👍. Recuerda que Font Awesome cuenta con 2 licencias la primera es una licencia libre, la segunda es una licencia de paga o pro, pero en este tutorial utilizaremos el framework Font Awesome con licencia libre.

Descargar Font Awesome

Nota: como usamos la versión de licencia libre, algunos iconos no estaran disponibles para nosotros :(

Instalar las fuentes de Font Awesome

Una vez descargado Font Awesome descomprime el archivo, el cual te generara una carpeta con el nombre similar a "fontawesome-free-5.3.1-web"

Carpeta descomprimida Font Awesome

Ingresa a la carpeta de Font Awesome y busca la sub carpeta "webfonts"

Carpeta webfonts de Font Awesome

Una vez dentro de la sub carpeta "webfonts" lo que sigue por realizar es instalar las fuentes con extensión .ttf como son:

  • fa-brands-400.ttf
  • fa-regular-400.ttf
  • fa-solid-900.ttf

Fuentes Font Awesome

Para instalarlos solo hay que hacer doble clic sobre la fuente, el cual arrojara una ventana en la que haremos clic en la opción Instalar. Repetimos los mismos pasos para las fuentes restantes.

Instalar fuente Font Awesome

Ahora ya tenemos instalados nuestras fuentes Font Awesome

Incluir iconos de Font Awesome en Fireworks

Para incluir iconos en nuestras maquetas de Adobe Fireworks, vamos a utilizar las fuentes de Font Awesome previamente instaladas.

Primero: escogemos el icono que deseamos incluir en nuestro diseño, para poder realizar una búsqueda del icono deseado accedemos a la página de Font Awesome en la sección icons en esta página seleccionamos la opción free que esta en el lado izquierdo, luego en el buscador escribimos una palabra clave por ejemplo html5, luego seleccionamos el icono que deseamos incluir en nuestro diseño.

Buscar icono Font Awesome

En la página del icono a utilizar, haz clic sobre la opción de copiar el Unicode Glyph que utilizaremos mas adelante en Adobe Fireworks

Copiar unicode glyph

Segundo: abrimos Adobe Fireworks con nuestro proyecto existente o creamos un nuevo proyecto, luego seleccionamos la Herramienta Texto (T) para escribir texto y pegamos el icono que anteriormente guardemos.

Pegando fuente fa

Aparentemente no paso nada, pero tranquilo.

Tercero: seleccionamos el icono que hemos copiado aunque no tenga una forma agradable aun, buscamos la fuente de Font Awesome que necesitaremos y seleccionamos la que soporta el icono.

seleccionamos fuente fa

Cuarto: listo terminamos, este es el resultado final que beberás obtener. ¡Bravo!

Producto final fa

Puedes incluir todos los iconos que soporte la fuente de Font Awesome, espero que te haya servido. Chao

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más