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. 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.

1. Click on a UI Element from UI Builder or a Form Element from the Form Builder.
2. In the Label field, click the Icon Textfield (small grey drop-down list in the input field).
3. (Optional) Click on the color field to input a color.
4. Select the preferred icon and apply the changes. 

You should see the field with the selected Font Awesome Icon.

Take note that only the following Form Field Elements have the Icon Textfield:

1. Date Picker
2. Password Field
3. Select Box
4. Text Field
5. Time Picker 

Alternative (Advanced method)

Alternatively, you can use Font Awesome icons in your UI menus, buttons, or any other UI element 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 Font Awesome HTML codes into UI menus.
  

Here are some usage examples for Font Awesome 6:

<i class="fas fa-user" style="color:red"></i>
<i class="far fa-bookmark"></i>
<i class="fas fa-file"></i>

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-11.0.13\webapps\jw\js\fontawesome6\css\ folder to know which icons are supported.

Add your own Font Awesome library

You can also add your own Font Awesome library if you want to use a newer version, such as Font Awesome 7, in your Joget application. 
There are two methods to achieve this:

• Using CDN (online loading) – suitable for cloud environments or when loading resources externally
• Using Local Files – suitable for controlled environments where resources are hosted within your server

Method 1: Using CDN (Recommended for Cloud)

To load Font Awesome 7 using CDN link:

1. Open Font Awesome CDN for v7.0.1.
2. Copy the required CDN links.
   
3. In the UI Builder, go to any menu for this Sample App we are using, Manage Font Awesome Icons - Form menu, open UI (List) > Custom Header.
   
4. Paste the CDN links into the Custom Header.
   Example:
   

   <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/brands.min.css" as="font" crossorigin />
   <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/solid.min.css" as="font" crossorigin />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

• The stylesheet enables Font Awesome icons in the UI.
• The preload links improve performance by loading font files earlier.

After applying the changes, the new icon version will be loaded when the UI is refreshed or when the menu is accessed.

Method 2: Using Local Files

To load Font Awesome 7 using local files:

1. Download the Font Awesome 7 files in GitLab Font Awesome.
2. Extract the files.
3. Copy the extracted folder into the following directory [joget folder]\apache-tomcat-11.0.13\webapps\jw\js.
4. In the UI Builder, go to Custom Header.
   
5. Replace the existing links with your local file path.
   

   <link rel="preload" href="/jw/js/fontawesome7/webfonts/fa-brands-400.woff2" as="font" crossorigin />
   <link rel="preload" href="/jw/js/fontawesome7/webfonts/fa-solid-900.woff2" as="font" crossorigin />
   <link rel="stylesheet" href="/jw/js/fontawesome7/css/all.min.css" />

6. Apply the changes and save the UI.

Once configured, the system will load Font Awesome 7 directly from your local server after you click the Manage Font Awesome Icons - Form menu.

Expected Outcome

The Home icon is displayed using the default Font Awesome 6 version

The Home icon updated after applying Font Awesome 7

Download Sample App