Hi Andrew,
Yes, of course.
In my case, I solved the issue by overriding the default Royale behavior to
load my own licensed Font Awesome Pro files instead of the default Free
setup.
Since my custom class is essentially a small adaptation of the SDK code,
I’m sharing it below as a reference. It should be useful for documentation
purposes, as it shows how to plug in a custom Font Awesome setup and keep
existing icons working after upgrading.
package org.apache.royale.icons
{
/**
* FontAwesome 7 Pro compatible icon component.
*
* Replaces the Royale SDK version which injected FA5 Pro CSS from an
* external CDN. FA7 Pro CSS is loaded via index-template.html instead,
* so no runtime CDN injection is needed here.
*
* FA7 keeps .fas / .far / .fal / .fab as backwards-compatible aliases
and
* all FA5 icon names as CSS aliases, so existing code using
FontAwesome5IconType
* constants requires no changes.
*/
public class FontAwesomeIcon extends FontIconBase
{
public static const BRANDS:String = "b";
public static const SOLID:String = "s";
public static const REGULAR:String = "r";
public static const LIGHT:String = "l";
public static const DUOTONE:String = "d";
public static const SIZE_LG:String = "lg";
public static const SIZE_X2:String = "2x";
public static const SIZE_X3:String = "3x";
public static const SIZE_X4:String = "4x";
public static const SIZE_X5:String = "5x";
public static const ROTATE_90:String = "90";
public static const ROTATE_180:String = "180";
public static const ROTATE_270:String = "270";
public var v:Number = 7;
protected var _faStyle:String;
protected var _oldFaStyle:String;
protected var _pullRight:Boolean;
protected var _pullLeft:Boolean;
protected var _border:Boolean;
protected var _relativeSize:String;
protected var _fixedWidth:Boolean;
protected var _flipHorizontal:Boolean;
protected var _flipVertical:Boolean;
protected var _rotation:String;
protected var _spin:Boolean;
protected var _pulse:Boolean;
protected var _stackLevel:int = 0;
protected var _inverse:Boolean;
protected var _swapOpacity:Boolean;
protected var _kit:Boolean;
protected var _kitDuotone:Boolean;
public function FontAwesomeIcon()
{
_faStyle = REGULAR;
super();
typeNames = "fonticon";
}
override public function addedToParent():void
{
super.addedToParent();
setUpClassName();
}
protected function setUpClassName():void
{
removeClass('fa' + _oldFaStyle);
addClass('fa' + _faStyle);
}
public function get faStyle():String
{
return _faStyle;
}
public function set faStyle(value:String):void
{
_oldFaStyle = _faStyle;
_faStyle = value;
setUpClassName();
}
override public function set text(value:String):void
{
removeClass('fa-' + _text);
_text = value;
if (_text)
addClass('fa-' + _text);
}
public function get relativeSize():String { return _relativeSize; }
public function set relativeSize(value:String):void
{
if (_relativeSize) removeClass('fa-' + _relativeSize);
removeClass('fa-' + value);
_relativeSize = value;
addClass('fa-' + value);
}
public function get fixedWidth():Boolean { return _fixedWidth; }
public function set fixedWidth(value:Boolean):void
{
_fixedWidth = value;
toggleClass('fa-fw', value);
}
public function get pullRight():Boolean { return _pullRight; }
public function set pullRight(value:Boolean):void
{
_pullRight = value;
toggleClass('fa-pull-right', value);
}
public function get pullLeft():Boolean { return _pullLeft; }
public function set pullLeft(value:Boolean):void
{
_pullLeft = value;
toggleClass('fa-pull-left', value);
}
public function get border():Boolean { return _border; }
public function set border(value:Boolean):void
{
_border = value;
toggleClass('fa-border', value);
}
public function get spin():Boolean { return _spin; }
public function set spin(value:Boolean):void
{
_spin = value;
toggleClass('fa-spin', value);
}
public function get pulse():Boolean { return _pulse; }
public function set pulse(value:Boolean):void
{
_pulse = value;
toggleClass('fa-pulse', value);
}
public function get rotation():String { return _rotation; }
public function set rotation(value:String):void
{
if (_rotation) removeClass('fa-rotate-' + _rotation);
_rotation = value;
addClass('fa-rotate-' + value);
}
public function get flipHorizontal():Boolean { return
_flipHorizontal; }
public function set flipHorizontal(value:Boolean):void
{
_flipHorizontal = value;
toggleClass('fa-flip-horizontal', value);
}
public function get flipVertical():Boolean { return _flipVertical; }
public function set flipVertical(value:Boolean):void
{
_flipVertical = value;
toggleClass('fa-flip-vertical', value);
}
public function get stackLevel():int { return _stackLevel; }
public function set stackLevel(value:int):void
{
if (value == 1 || value == 2)
{
if (_stackLevel != 0)
{
removeClass('fa-stack-' + String(_stackLevel) + 'x');
if (_stackLevel == 1) removeClass('fa-inverse');
}
_stackLevel = value;
addClass('fa-stack-' + String(value) + 'x');
inverse = _inverse;
}
}
public function get inverse():Boolean { return _inverse; }
public function set inverse(value:Boolean):void
{
_inverse = value;
removeClass('fa-inverse');
if (value && _stackLevel == 1) addClass('fa-inverse');
}
public function get swapOpacity():Boolean { return _swapOpacity; }
public function set swapOpacity(value:Boolean):void
{
_swapOpacity = value;
toggleClass('fa-swap-opacity', value);
}
public function get kit():Boolean { return _kit; }
public function set kit(value:Boolean):void
{
if (value && _kitDuotone) kitDuotone = false;
_kit = value;
toggleClass('fa-kit', value);
}
public function get kitDuotone():Boolean { return _kitDuotone; }
public function set kitDuotone(value:Boolean):void
{
if (value && _kit) kit = false;
_kitDuotone = value;
toggleClass('fa-kit-duotone', value);
}
}
}
In summary, the key idea is:
- Prevent Royale from relying on the default Font Awesome Free setup
- Load your own Font Awesome (Pro) resources
- Keep compatibility with existing icon usage (e.g., FontAwesome5IconType)
Also add the all.min.css from the package I bougth and the webfonts folder
Best regards,
Hugo
Andrew Wetmore <[email protected]> escreveu (quarta, 1/04/2026 à(s)
21:29):
> Can you provide a code snippet for the docs?
>
> Andrew Wetmore
>
>
> On Wed, Apr 1, 2026, 2:00 PM Hugo Ferreira <[email protected]> wrote:
>
> > Solved.
> > I purchased Font 7 Pro and overrided the Royale framework behaviour.
> >
> > Now works both on my current version and SDK updated.
> >
> > Thanks.
> >
> >
> > Josh Tynjala <[email protected]> escreveu (segunda, 30/03/2026
> > à(s)
> > 20:28):
> >
> > > I have not tried, but I don't see why it wouldn't work.
> > >
> > > --
> > > Josh Tynjala
> > > Bowler Hat LLC
> > > https://bowlerhat.dev/
> > >
> > >
> > > On Mon, Mar 30, 2026 at 11:54 AM Hugo Ferreira <[email protected]
> >
> > > wrote:
> > >
> > > > Hi Josh,
> > > >
> > > > Thank you for the clarification.
> > > >
> > > > I had already forced my code to use `regular`, so I wanted to confirm
> > one
> > > > point:
> > > >
> > > > If I purchase Font Awesome Pro, can I keep my existing Font Awesome 5
> > > icons
> > > > working after upgrading Royale, assuming I point my HTML to my own
> > > licensed
> > > > Font Awesome Pro files instead of the default one loaded by Royale?
> > > >
> > > > In other words, if I load the Pro version myself, should everything
> > > > continue to work as before on my current codebase, without requiring
> > > major
> > > > changes in Royale beyond that setup?
> > > >
> > > > Best regards,
> > > > Hugo
> > > >
> > > > Josh Tynjala <[email protected]> escreveu (sábado,
> 28/03/2026
> > > à(s)
> > > > 17:17):
> > > >
> > > > > The default for faStyle changed from regular to solid because there
> > are
> > > > way
> > > > > more free solid icons than free regular icons. You might be able to
> > get
> > > > > some of the missing icons working by setting their faStyle
> property.
> > > > >
> > > > >
> > > > >
> > > >
> > >
> >
> https://github.com/apache/royale-asjs/commit/5bc236c5be38cca0fa4f46a4fa218506cdc12cc9
> > > > >
> > > > > However, a bigger, but necessary, change is that we’re now loading
> > Font
> > > > > Awesome Free. Before, we were loading the Pro version. However,
> > that’s
> > > > not
> > > > > really compatible with our license. So we had to switch to Free.
> Free
> > > has
> > > > > fewer icons than Pro, so some of the icons you were using may not
> be
> > > > > available anymore.
> > > > >
> > > > > That being said, anyone can make their own custom component that
> > loads
> > > > the
> > > > > Pro version of Font Awesome instead. It just can’t be included with
> > > > Royale.
> > > > >
> > > > > --
> > > > > Josh Tynjala
> > > > > Bowler Hat LLC
> > > > > https://bowlerhat.dev/
> > > > >
> > > > >
> > > > > On Fri, Mar 27, 2026 at 5:57 PM Hugo Ferreira <
> > [email protected]>
> > > > > wrote:
> > > > >
> > > > > > Hi,
> > > > > >
> > > > > > I had not updated the framework in a very long time.
> > > > > >
> > > > > > I finally want to spend some time fixing a very old DataGrid bug,
> > but
> > > > > > before doing that I updated the framework on my side.
> > > > > >
> > > > > > After the update, almost all icons disappeared from my
> application
> > > > menu.
> > > > > > For example, FontAwesome5IconType.DUMPSTER no longer appears,
> while
> > > > > > FontAwesome5IconType.BUILDING still works.
> > > > > >
> > > > > > So far, this seems to affect most of the FontAwesome 5 icons I
> use,
> > > not
> > > > > > just a single one.
> > > > > >
> > > > > > Best regards,
> > > > > >
> > > > > > Hugo.
> > > > > >
> > > > >
> > > >
> > >
> >
>
