FontAwesome Import as Iconographic Font

A component has been developed in IdealTwin Pro which allows the use of iconographic sources, such as those offered by Font Awesometo enrich the user interface (UI).

Default, IdealTwin Pro includes the free version of Font Awesome. However, it is also possible to integrate any other source by following the process described below. In this example, we will use the free version of Font Awesome as a reference.

Steps to Integrate an Iconographic Font

1. Download the Iconographic Font

Visit the official website of the font you want to use and download the corresponding package. Make sure to unzip the downloaded file to access the necessary resources.

https://fontawesome.com/download

Both the desktop and web versions contain the necessary elements to import and use the fonts.

2. Converting Metadata to Datatables format in Unreal Engine

In order for Unreal Engine to be able to interpret the icons, it is necessary to generate a DataTable containing the unicodes from the source. This process requires extracting information from the icons.json that comes with the source package.

It is necessary to have installed Python in the system to perform the necessary file conversions.

Steps to follow:

1. In the unzipped folder, locate the file icons.jsongenerally located on the route ../fontawesome-free-x.x.x-web/metadata/.

2. Copy this file to the following project location in the plugins folder: Project/Plugins/IdealTwinPro/Scripts/FontIconConverter

3. Run the conversion script included in the plugin. To do this, open a command console, navigate to the script folder and use the following command:

py FontAwsomeToJsonDatatable.py

This script will generate a file named UE_FontAwsome_DataTable.json in the same folder. This file is the one that will be used in Unreal Engine.

The script contains detailed comments on how it works, but it is not necessary to review them to complete this process.

4. We drag the generated file into the ContentBrowser.

5. In the import options, you must define the type of the row that will be used as importer, which must be FontIconDatatableRow in order to be able to apply the import correctly.

Once the process is complete, it is possible to rename this Asset and it should look something like this:

3. Importing Sources into the Project

With the data converted, the next step is to import the sources into the project:

1. Locate fonts in the format .oft in the downloaded folder, usually in ../ofts.

2. Create a new folder in the Unreal project to organize them.

3. Drag and drop files .oft at Content Browser of Unreal Engine.

4. During the import, the system will ask if you want to create the files from Font automatically. Select No in all options, otherwise it will create a separate file for each imported font.

5. Once imported, it creates an asset of type Font from the context menu of the Content Browser with Right click > User Interface > Font and assign a representative name such as "F_FontAwesomeFree".

6. Opens the newly created source asset and adds the imported variants, naming them according to the styles defined in the file icons.json (e.g. Regular, Solid, etc.).

4. Adding the New Font to the Styles Asset

For the widget to ITw_Font_Icon can use the iconographic font, you must add it to the configuration asset of the IdealTwin Pro UI.

Steps:

1. Access the Settings from IdealTwin Pro UI.

2. Inside the configuration file, find the section Font Icon Map.

4. Add a new entry with:

   • An identifier name for the source.

   • The source asset created earlier.

   • The Data Table generated (UE_FontAwsome_DataTable.json).