Utilizar iconos Font Awesome en Genexus (con CDN)

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 utilizará el método de CDN  (Content Delivery Network o Red de Entrega de Contenido) que es un servidor que provee un link donde se encuentran los archivos de css y javascript necesarios para utilizar una librería sin necesidad de descargar los archivos ni instalarlos ni hacer nada más que agregar una línea de código.

Este método, como todo tiene sus ventajas y desventajas, te lo dejo para que investigues un resumen detallado si te parece. Una de las recomendaciones principales es No utilizar este método en ambiente de producción  esto por que si donde se aloja el contenido llega a cambiar, tu aplicación no tendrá acceso a los recursos y no cargará el componente que lo utilice. En otra entrada del blog veremos el método recomendado que es más estable ante cambios

Ahora sí, empezamos:

Agregando referencias de Font Awesome 

Podemos buscar en google font awesome cdn y elegimos la opción que más nos parezca, por lo general utilizo esta fuente:

https://cdnjs.com/libraries/font-awesome

Damos clic en la etiqueta de HTML para copiar la referencia al portapapeles

Ahora regresamos a Genexus y abrimos el masterpage que utilizamos, por defecto es MasterpageUnianimoSidebar (también puedes crear una copia de esa masterpage por si quieres conservar ese masterpage tal y como está), en la sección de Eventos vamos al evento Load y pegamos la referencia copiada de la siguiente manera:

form.HeaderRawHTML+=!'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />'

Ya con esto puedes utilizarlo en donde quieras, agregando una etiqueta con formato HTML y usando las clases de Font Awesome

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 colocas HTML

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:

Diseño:

Resultado:

En otra entrada veremos como hacer un menú de iconos un poco mejor que el que vemos en pantalla utilizando user controls + Font Awesome

septiembre 22, 2025 Tags : awesome , font , fontawesome , Genexus , Web

Subscribe by Email

Follow Updates Articles from This Blog via Email