Font Awesome Icons

Introduction

Font Awesome is a font and icon UI toolkit based on CSS and LESS that you can add to your Joget apps to enhance the visual appeal, especially the UI menus. Joget DX comes preloaded with Font Awesome libraries, specifically versions 5.8.1 and 4.6.1, allowing you to use many icons to improve user interface design.

How does it work?

Font Awesome provides CSS-based icons that can be easily integrated into your Joget app. Insert the appropriate HTML code to add these icons to menus, buttons, or any other UI element. Joget DX includes built-in support for Font Awesome, making it easy to use these icons without additional libraries unless you prefer a newer version.

You can use Font Awesome icons in your UI menus by including the icon's class in the HTML code. The Font Awesome code for the Joget logo is:

<i class="fab fa-joget"></i>

•  Example of adding Fontawesome HTML codes into UI menus.

Here are some usage examples for Fontawesome 5:

<i class="fas fa-home"></i><br/>
<i class="far fa-bookmark"></i><br/>
<i class="fas fa-file"></i><br/>

How to get the full font awesome classes

You can reference the complete list of icons from the Font Awesome website, or You can also view the FontAwesome icon code names (for example, fa-arrow-up) in the CSS source files in your Joget DX [Joget folder]\apache-tomcat-8.5.41\webapps\jw\js\fontawesome5\css\ folder to know which icons are supported.

Add your own font awesome library

You can add your own FontAwesome library into your app if you need a newer version than currently available in Joget DX, using the following syntax in UI Custom Header (change the href="" url accordingly). Note that this functionality is theme-dependent, as each theme is its own plugin with distinct configuration options. Therefore, you will need to customize the UI Custom Header for each specific theme you are using. Here is the Font Awesome CDN reference for "v5.12.0-1:

<link rel="preload" href="/jw/js/fontawesome5/fonts/fontawesome-webfont.woff2?v=4.6.1" as="font" crossorigin />
<link rel="preload" href="/jw/js/fontawesome5/webfonts/fa-brands-400.woff2" as="font" crossorigin />
<link rel="preload" href="/jw/js/fontawesome5/webfonts/fa-solid-900.woff2" as="font" crossorigin />