Creación de fuente de iconos de tipo de alimentos

Contexto

Para crear una buena fuente de iconos, se deben seguir algunos pasos importantes. En esta breve guía te ayudaremos a crear una fuente de iconos excelente para tu app.

Identificación de iconos

Este es el conjunto de letras que utilizamos actualmente para identificar los distintos tipos de alimentos en el Centro de gestión:

• A - vegetariano
• B - vegano
• C - alcohol

Ten en cuenta que, dentro de los canales, el color se define en función del color de la fuente del icono indicado en el archivo de personalización, de modo que si vegano y vegetariano son verdes, este icono también será verde en todos los canales.

En el Centro de gestión, el usuario puede seleccionar la etiqueta de alcohol en “tipo de comida especial” en la bandeja de iconos.

Instrucciones

1. Debes descargar, instalar y abrir FontForge. Es un editor de fuentes gratuito y de código abierto disponible para Windows, macOS y Linux. Es una opción excelente para cualquiera que desee crear sus propias fuentes de iconos exclusivas:
   
   
   
2. Al abrir el programa, lo primero que hay que hacer es introducir los datos correctos de la fuente. Esto es esencial para tener la seguridad de que el sistema reconoce la fuente y que funciona correctamente.
   Para hacerlo, haz lo siguiente:
   - Haz clic en Element (Elemento) en la barra de menú superior.
   - Luego, selecciona Font Info (Información de la fuente) en el menú desplegable (como en la primera imagen).
   - Después de abrir la ventana Font Info, deberías ver tres campos de entrada. En cada uno de estos campos, introduce el nombre de tu fuente como iconfont. Una vez introducido el nombre en los tres campos, haz clic en el botón OK para confirmar y guardar los cambios (como en la segunda imagen):
   
   
3. Después de guardar los detalles de la fuente, el siguiente paso es añadir los iconos para alimentos veganos y vegetarianos que creaste previamente como SVG en un editor vectorial, como por ejemplo, Illustrator. Para ello, selecciona las letras adecuadas para representarlos e importa los iconos SVG correspondientes a esas letras. 
   Selecciona la letra “A” mayúscula para representar la opción vegetariana y la “B” para la vegana. Haz doble clic en la letra seleccionada para abrir la página interior de esta manera:
   
   
   

4. Tras abrir la página dentro de la letra elegida, dirígete a File (Archivo) en la barra de menú superior y selecciona Import (Importar). Encuentra la ubicación del archivo de iconos SVG en la unidad local y haz clic en el botón Import. Esto añadirá el icono SVG dentro de la letra seleccionada, como se muestra a continuación:

5. Después de importar los iconos, es muy importante que los alinees correctamente. Para hacerlo, selecciona el icono con el comando CMD+A o CTRL+A (según si trabajas en Mac o Windows) y ajusta la alineación según sea necesario. Después de alinear el icono, haz clic en el botón Close (Cerrar) para guardar los cambios y cerrar el editor de glifos:
   

6. Tras completar todos los pasos anteriores, deberías poder ver que el icono vegetariano se añadió correctamente dentro de la letra A:
   
   
   Ten en cuenta que debes repetir exactamente los mismos pasos para añadir un icono de alimento vegano a las letras B y C.
   
   

7. El último paso es exportar la fuente creada. Después de hacerlo, la fuente del icono debería ser totalmente funcional y estar lista para añadirse al Centro de personalización. Para ello, dirígete a File y haz clic en Generate Fonts (Generar fuentes).En las opciones, elige OpenType como el formato con el que deseas hacer la exportación y selecciona la ubicación donde quieres exportar la fuente:
   Una vez hecho esto, solo tienes que hacer clic en Generate (Generar) para finalizar todo el proceso.

¡Ya lo tienes!