Native Font Awesome
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 Atlas 3 design properties and classes
Atlas 3
The module brings in Atlas 3 themesource files so you need Atlas 3 to take advantage of this
Installation
Mendix project
Download the module from the marketplace. This makes widget and design properties available in your project.
The initialization as required in version 2 is no longer necessary. If upgrading from version 2, remove the native font awesome library widget, itvisors.NativeFontAwesomeLibrary.mpk. The initialization logic in your app can also be removed in that case.
Custom build
The widget does not work in the Make It Native app!
You need to include the Font Awesome fonts in your custom build as custom fonts. Note that the regular and solid fonts are variants of the free (or pro) font so expand the group box in the Native Builder UI to see the individual fonts.
The files for the free fonts are supplied in the module under themesource\nativefontawesomebutton\native\FontAwesome fonts\
Version 3.0.0 of the module has version 6.2.0 of Font Awesome.
Font Awesome Pro
As of version 3 of the module, using Pro icons has become easier. 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 } };
_________________________________________________________________________________________
Documentation for version 2
Limitations
- You need to build the library widget yourself to make use of a pro license.
Atlas 3
The module brings in Atlas 3 themesource files so you need Atlas 3 to take advantage of this
Atlas 2
You can use the new widgets when the app is still at Atlas 2. Just delete the module after downloading it. The widgets will remain in your project.
App reload
During development you may get error messages about icons that could not be found. This happens when the app reloads while on a detail page. The library is not initialized in that case. Just reload the app so it starts at the home page.
Installation
Download the module from Marketplace. It brings in the widgets and theme classes.
Separate library and button widgets
The existing Marketplace widget is now split in a library and button widget. Advantages:
- Ensures font libraries are included only once
- No warnings in Studio Pro about missing initialization actions on each button widget
- The module brings in style classes
Upgrading from the single widget version
The single widget had an action to either initialize the library or show a button. This is now split across two separate widgets. Where you currently have an existing Native Font Awesome Button widget with action initialize, replace that with the Native Font Awesome Library widget and configure your nanoflow again on that widget.
Configuration
The Font Awesome library needs to be initialized to allow icons to be referenced by name. This must be done before showing icons. So if you want to use Font Awesome on the home page you need to make sure that the library is initialized before attempting to show an icon.
This initialization step also ensures that the icons are included in the bundle.
This is recommended to use, even if your home page does not (yet) have Font Awesome icons. It would be very confusing if someone just adds an icon and that would break the app.
Supporting entity
Create a non-persistent entity with a boolean flag. Example here: Entity NativePageContext attribute FontAwesomeInitialized.
Home page
On the home page add a dataview with a datasource nanoflow. In that nanoflow, create a NativePageContext with FontAwesomeInitialized set to false.
In the dataview, create two containers with conditional visibility on FontAwesomeInitialized.
Initialize
In the container with conditional visibility FontAwesomeInitialized=false place the Native Font Awesome Library widget . Configure a nanoflow as library loaded action on the widget. In that nanoflow, set FontAwesomeInitialized to true.
Initialization done
In the container with conditional visibility FontAwesomeInitialized=true, place the normal page content and use Native Font Awesome Button widgets to show icons.