Font Awesome

What is FontAwesome?

FontAwesome is an icon set and toolkit that provides many different icons in many different formats for use on the web (and native apps built with web technology).

It is primarily based on using a special icon font (there are also SVG fallbacks but those are not used by Fonto).
That means that based on a unicode value, a certain glyph is rendered from a special FontAwesome font which looks like a certain icon.
Based on a CSS class, like .fa-undo, the ::before pseudo element's content is set to a certain unicode value (for undo it's \f0e2).
Then together with the CSS rule: font-family: "Font Awesome Pro", an undo icon appears.

How do you use FontAwesome through the Fonto SDK?

When using FDS, many of its components accept an icon prop that ultimately renders an Icon component with that icon prop.

The icon prop accepts a Font Awesome icon name (or a custom icon name).

For example: <Icon icon="undo" /> would render an "undo" icon using Font Awesome under the hood.
And <FxOperationButton operationName="undo" /> renders a Button with an "undo" icon as well.
(Because the "undo" operation specifies an "undo" value for its icon prop which is propagated to the <Icon /> that is ultimately rendered by that stack of components).

You can also use Font Awesome icons through the CVK. You can create icon widgets through fontoxml-families' createIconWidget() (and through similar other APIs that accept an icon property somewhere).

In all cases of FDS/FX and CVK APIs, whenever there is an icon prop(erty)/parameter somewhere, it can accept a Font Awesome icon name.

FDS/FX render all icons in a fixed width container (using Font Awesome's fixed-width modifier class: fa-fw).
This helps keep the UI of Fonto look consistent.

What version of FontAwesome does the Fonto SDK use?

Since version 7.9.0 we use Font Awesome 5 Pro. Before that, Font Awesome 4.7.0 was used.

Do I have to change anything manually if I upgrade my editor that is on a version 7.x <= 7.8.x, to a version >= 7.9.0?

No. All icon names that were valid in Font Awesome 4.7.0 still work in Font Awesome 5 (Pro).

We've included the upgrade shim stylesheet provided by Font Awesome that allow you to use an old 4.x icon name and get the equivalent icon name for version 5.

Since Font Awesome 5, there are 4 different styles for most icons, and 1 special style for certain icons.

We've defaulted to use the regular style if no explicit style is specified. This includes all Font Awesome 4 icon names.

The upgrade shims provided by Font Awesome actually specify a different style to use for certain icon names. 
We cannot use these styles for technical reasons. Ultimately, they would prevent you from explicitly setting the style of an icon due to our internal architecture and backwards compatibility policy.
This is a very small limitation in our opinion; none of the icons used by core features of the SDK or of its addons needed a different style than regular.

How can I change the style of an icon?

If you are using a Fonto SDK < 7.9.0, you can only use the hardcoded 'style' in which a Font Awesome 4.7.0 icon (name) is rendered.

For example: "comment" renders a 'solid' comment icon, "comment-o" renders a 'regular' comment icon (without a fill), and a 'light' style was not available yet for this icon in Font Awesome 4.7.0.

If you are using a Fonto SDK >= 7.9.0, you get the 'regular' style be default.
You can also use any of the other Font Awesome 5 Pro styles for a given icon.
In that case you have to explicitly prefix the icon name with the desired style prefix and add the fa- prefix in front on the icon name again.

For example: "comment" renders a 'regular' style comment icon, "fas fa-comment" renders a 'solid' style comment icon and "fal fa-comment" renders a 'light' style comment.

If you are using an icon name of a so-called 'brand' style icon (in Font Awesome 5),
and you do not see an icon being rendered, make sure to explicitly provide the 'brand' style prefix "fab" like so: "fab fa-bluetooth".

The names of icons and their available styles can be found on the Font Awesome icons overview/search page.
Font Awesome also keeps a version 4.7.0 icons overview/search page online.

What features of FontAwesome 5 (Pro) are not yet supported?

Basically anything more than using icon names and icon style prefixes. Some functionality, like sizing and flipping is supported by other props of FDS' Icon component.

However, unsupported here does not mean they won't work!
It just means that we do not have a formal API for it so we rely completely on Font Awesome (5)'s own API to implement certain features.
And because we're talking about (global) CSS here, we cannot theoretically guarantee advanced features of Font Awesome (5) will work together with the CSS of the Fonto SDK.

Practically speaking, you are free to experiment with using things like "fa-rotate-90" as part of an icon name.
Just make sure to include the explicit style prefix and fa- prefix to ensure all extra modifier classes are also rendered.

For example: "far fa-comment fa-rotate-90" will work fine.

Many other styling Font Awesome 5 (Pro) features expect multiple HTML elements and or certain CSS variables to be set. Currently, both the FDS and CVK APIs do not render the correct HTML structure for most of them.
You could try to render your own Font Awesome 5 compatible HTML in a custom CVK widget or a custom React component.
And similarly, you could ensure the correct CSS variables are set at the right values at the right time yourself.

We will remain integrating Font Awesome during all future 7.x releases.
This means that you can expect these experiments to work during 7.x, and we will probably start similar experiments inside the platform provided UI as well.
Just know that it could theoretically be possible that the CSS of such an advanced feature breaks during a future 7.x upgrade > 7.9.0 and that you'll have to fix it manually yourself.
If you stick to icon names and optional explicit icon style overrides, everything will continue to work during any 7.x release > 7.9.0.


Was this page helpful?