Overview

Use Font Awesome in Mendix Native Mobile apps.

This is a module, not a single widget. It contains a widget and theme files.

Documentation

Native Font Awesome module

Use Font Awesome in Mendix Native apps. The widget renders as a button.

Features

• All free Font Awesome icons are available
• The module comes with design properties and classes
• When no action is configured it will not consume click/tap events, allowing these to bubble up to a container

Installation

Download the module from the marketplace. This makes widget and design properties available in your project.

For v8.0.0 and up custom fonts in the native app build are no longer required

Font Awesome Pro for V8.0.0 and up

Font awesome no longer ships .ttf font files. Font Awesome has also changed their distribution method.

You need to use a Font Awesome kit with package support enabled. Then build the widget with your own Font Awesome token and kit code.

Repository mendix-NativeFontAwesomeButtonPro is a template for the build. It has detailed instructions for the build.

No longer required:

• Font awesome fonts in your native app build
• The configuration class in the styling

Font Awesome Pro before V8.0.0

Using Pro icons is easy. The widget already contains the meta data. (Not the fonts or icons themselves as the Pro icons require a paid license.)

Custom build

Instead of using the supplied free font files, use the Pro ttf font files. These are included in the web version that you can download yourself using your Pro license. Include the ttf files for light, regular, solid and brands as custom fonts in your build. (Duotone and thin are not yet supported by the library used in the widget so these will be available in a later version.)

Activating the Pro icons

There is no free/pro property on the widget as that would be tedious and involve a lot of rework if you were to buy a Pro license later.

The Pro icons are activated by including a style in your native theme:

export const itvisors_nativefontawesomebutton_NativeFontAwesomeButton = {

configuration: {

useProIcons: true

}

};