Cuando utilizamos Genexus, tenemos la posibilidad de utilizar iconos en formatos de imagen, pero agregar tantas imágenes a la KB puede resultar algo tedioso y la hace más pesada, a parte de que buscando imágenes diferentes podríamos dejar muchas imágenes con diferente estilo, lo que no nos da una presentación consistente y algo que no es tan agradable para usar día con día en una aplicación para un usuario final.
Utilizar una librería de iconos nos da mucha flexibilidad, como utilizarlos donde queramos, cambiar su color, cambiar su tamaño, mantener una consistencia y menos trabajo ya que no hay que diseñar nada ni preocuparse que todos tengan el mismo formato
Esta entrada te muestra como integrar la librería de iconos de Font Awesome 7 para poder utilizar sus iconos gratuitos sin necesidad de importar imágenes. Se integrarán directamente en la KB de genexus mediante CSS para hacerlo mucho más liviano y sin generar tantos archivos.
En otra entrada del blog veremos con el método de CDN (Content Delivery Network) que no es recomendable para usar en producción ya que si cambia la ubicación de los archivos en el repositorio que hemos elegido podría no cargar los iconos
Ahora sí, empezamos:
Descargando archivos de FontAwesome
Podemos buscar en google FontAwesome Download o vamos directamente a este link oficial
https://fontawesome.com/download
en la pantalla de descarga damos clic en "Download Free For Web"
Nos descargará un archivo ZIP.
En una carpeta en Nueva, extraemos del ZIP el folder "webfonts" y el archivo "all.min.css" que está en la carpeta "css" dentro del ZIP
Dentro de genexus vamos a "Files" y damos clic al botón "New"
Colocamos el nombre del primer archivo a importar, importante diferenciarlos ya que lo debemos hacer por cada archivo de la carpeta "webfonts"
Al dar "Create" nos pedirá seleccionar el archivo, seleccionamos el archivo correspondiente de la carpeta "webfonts" extraída del ZIP.
Haremos lo mismo con el archivo "all.min.css"
Luego de hacer esto con cada archivo tendremos el siguiente listado
Vamos al objeto de diseño Design System Object (DSO) que estemos utilizando, en este caso el que se crea por defecto y agregamos las siguientes líneas al inicio (importante que estén al inicio para que se importen correctamente) dentro de la definición del DSO:
@import gx-file(FontAwesomeAll);
@font-face
{
font-family: fa-brands-400;
src: gx-file(FontAwesomeBrands);
}
@font-face
{
font-family: fa-regular-400;
src: gx-file(FontAwesomeRegular);
}
@font-face
{
font-family: fa-solid-900;
src: gx-file(FontAwesomeSolid);
}
@font-face
{
font-family: fa-v4compatibility;
src: gx-file(FontAwesomeV4Compatibility);
}
Y listo, ya podemos utilizar los iconos de FontAwesome en este caso, versión 7
Utilizando iconos
Asegúrate de utilizar los iconos gratuitos, hay bastantes así que seguro encontrarás algo que se acomode a tu necesidad, puedes ver los iconos gratuitos aquí:
https://fontawesome.com/search?f=classic&s=solid&ic=free&o=r
Para utilizarlo, simplemente busca el icono que quieras (de la categoría gratis) y le das clic
Ahora das clic en la etiqueta HTML para copiarlo al porta papeles
en genexus agregas un Textblock y en la propiedad Caption pegas la etiqueta HTML copiada, en la propiedad "Format" seleccionas "HTML"
En diseño:
En ejecución:
Dando un poco de estilo
Puedes cambiar el tamaño de los iconos, hacer que roten entre otras configuraciones de estilo asignando clases CSS de Font Awesome que ya están incluidas en la librería, puedes ver la esas opciones aquí: https://docs.fontawesome.com/web/style
Yo suelo usar el reescalado literal que va de 1 a 10 donde 1 es el valor por defecto, se utiliza de esta manera: <i class="fa-solid fa-truck fa-4x"></i> aquí le diremos que tiene un tamaño literal de 4
aquí un ejemplo más completo:
Web panel
 |
Resultado:
Si te presenta este error en la consola:
y el icono no carga
Puedes configurar cada archivo de tipo de letra para que se extraiga en la carpeta que lo está buscando.
Para Java: static\resources\webfonts\
Para .Net: resources\webfonts\
y así se elimina el error en la consola y el icono se muestra correctamente
Si al hacer deploy en un servidor java (por ahora me ha pasado en java) te presenta un error en consola indicando que no se ha podido encontrar el archivo "all.min.css"
puedes hacer lo siguiente:
Desde Genexus, en los archivos, selecciona el de FontAwesomeAll y cambia en las propiedades a que se extraiga en la misma carpeta que los demás: static\Resources\webfonts\
y en DSO cambia la línea @import gx-file(FontAwesomeAll);
Por @import "../webfonts/all.min.css";
Genexus extraerá del archivo FontAwesomeAll en esa carpeta y con el nombre all.min.css ya con eso debería quitarse el error.
En otra entrada veremos como hacer un menú de iconos un poco mejor que el que vemos en pantalla utilizando user controls + Font Awesome
diciembre 02, 2025
Tags :
awesome
,
font
,
fontawesome
,
Genexus
,
Web
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments