0

ExtJs 7.6.0 comes with the free version of font-awesome (fa) 5. Has anyone been successful in integrating fa pro 5 with ExtJs 7.6.0 (classic)?

If yes, any tips or instructions?

I found these instructions from here but they apply to integrating fa 5 into ExtJs 6.6.0 which uses fa 4.7 by default.

TIA

boggy
  • 3,674
  • 3
  • 33
  • 56

1 Answers1

0

I have successfully integrated both Font Awesome Pro 5 and 6, into Ext JS versions 6 and 7 (classic). I used several guides, including the ones you linked, and last time I even got an upgrade instructions document from Sencha Support.

I can tell you, this is not an easy ride since both Ext JS and Font Awesome are changing constantly, every guide is somehow outdated, and even the document I got from Sencha Support was not complete. Many manual tweaks are needed to get it work.

So I can share the steps I followed last time (Font Awesome Pro 6 - Ext JS 7.6) but chances are good that you will need additional steps to get it work. All paths are relative to your project's root folder.

  1. Back up existing FA (ext/packages/font-awesome).
  2. Get the FA Pro (web) version you'd like (you need subscription for the Pro versions), and unzip it into ext/packages/font-awesome/resources.
  3. From webfonts directory under the folder in the previous step, copy files to ext/packages/font-awesome/resources/fonts.
  4. Examine the contents of the downloaded FA package in scss folder. You have to copy these files under ext/packages/font-awesome/sass/etc, but depending on the version, you might need to rename some files. For example in latest FA Pro it is regular.scss etc., but in ext/packages/font-awesome/sass/etc you need to have fa-regular.scss.

The following steps should be perfomed in ext/packages/font-awesome/sass/etc. Honestly I don't know if all of them are necessary, you can try without these or after every step to see how it works out.

You always have to execute sencha app build development to test it and repeat it after every change.

  1. In _core.scss change font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}'); to font-family: var(--#{$fa-css-prefix}-style-family, "#{$fa-style-family}");.
  2. If you need duotone icons, clear the contents of _duotone-icons.scss and add this:
@each $name, $icon in $fa-icons {
  .#{$prefix}fad.#{$fa-css-prefix}-#{$name}::after,
  .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
    content: unquote('"\#{$icon}\#{$icon}"') !important;
  }
}
  1. Am not really sure in this step, maybe you can leave it out and perform only if it does not work without it. In _functions.scss, _icons.scss, _mixins.scss and _shims.scss there are lines like this: @return unquote("\"#{ $fa-var }\"");. In my current code all of these are transformed like: @return unquote('"\#{ $fa-var }"');. (The part $fa-var varies, especially in _shims.scss).
  2. I had some problems with the fa-divide function in _functions.scss. The code here caused a stack overflow error. I actually filed a bug report to Font Awesome but I don't know whether it's fixed or not. I ended up with getting rid of the fa-divide function. This includes the following steps:
  • In _variables.scss change every call to fa-divide to fixed values, like:
    • fa-divide(20em, 16) to 1.25em
    • $fa-li-width * fa-divide(5, 4) to 2em
  • Remove @import 'functions'; from all scss files.
  1. Add this to _variables.scss (this is also because of the previous step, since it is originally in the _functions.scss file I decided to remove):
@function fa-content($fa-var) {
  @return unquote("#{ $fa-var }");
}
  1. You might run into problems with older icon names that are no longer present in the installed FA, but you Ext JS code uses them. If you find something like this, you can add definitions to the end if _variables.scss, outside the closing );:
$fa-var-automobile: $fa-var-car;
  1. If you have problems with imports during build, check for @import lines in the scss files, you might need to add a leading underscore, like @import '_variables'; instead of @import 'variables';.
  2. Finally, go through every font variation scss files you'd like to use (fa-solid.scss etc.), and make the following adjustments:
  • Replace content: unquote("\"#{ $icon }\""); with content: unquote('"\#{ $icon }"');
  • Overwrite font-family for the appropriate one, for example in fa-light.scss from Font Awesome 6 Pro to Font Awesome 6 Pro Light, in fa-solid.scss from Font Awesome 6 Pro to Font Awesome 6 Pro Solid etc.

When this is ready, execute sencha app build development to try it out.

You should be able to use icon variations in Ext JS code like:

x-fa fa-user
x-fal fa-user
x-fas fa-user
x-fat fa-user
x-fab fa-google

Please let me know how did it work out for you.

Peter Koltai
  • 8,296
  • 2
  • 10
  • 20