Upgrade Font Awesome icons to Pro version

By default, all icons in Bryntum products are based on the Font Awesome 6 Free solid font. But, if you have a Font Awesome Pro license, you can upgrade the shipped FREE font to one of your Pro fonts.

Font Awesome fonts

Here is the table of FREE and Pro font's specification. It is valid for Font Awesome v6.7.2 and might be changed in the future. For the latest values consult with official Font Awesome guide.

StyleAvailability@font-face weight@font-face font-family
SolidFree Plan900Font Awesome 6 Free or Font Awesome 6 Pro (for pro users)
RegularPro Plan Required400Font Awesome 6 Pro
LightPro Plan Required300Font Awesome 6 Pro
ThinPro Plan Required100Font Awesome 6 Pro

FontAwesome also offers multiple other styles, such as Duotone, Sharp and Brands.

Replace FREE icons with Pro icons

Let's say you want to replace our Font Awesome 6 Free / Solid font with Font Awesome 6 Pro / Regular font. Download the new Pro font and copy it into your project. Then set the --b-widget-icon-font-family CSS variable to 'Font Awesome 6 Pro' in your CSS file:

:root:not(.b-nothing) {
    --b-widget-icon-font-family : 'Font Awesome 6 Pro';
}

Using different Font Awesome fonts in one application

If you need to combine two and more types of icon fonts in one application, you can override font-weight styles for specific icons using CSS selectors. For example:

/* Use Font Awesome 6 Pro / 400 (Regular) by default */
.fa:before,
.b-icon:before {
    font-weight : 400;
}

/* Use Font Awesome 6 Pro / 900 (Solid) for specific widget */
.my-widget .fa:before,
.my-widget .icon:before {
    font-weight : 900;
}