Integrate font-awesome pro 5 with ExtJs 7.6.0

Question

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

Answer 1

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;
  }
}

3. 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).
4. 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.

5. 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 }");
}

6. 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;

7. 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';.
8. 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.

Answer 2

your post helped me a lot, Thanks. I just successfully integrated FA Pro 6.5.1 into Extjs 7.7, but I had to do some additional work...

Step 1: In _core.scss fas, far, fal & fat points to the same font-family. I changed:

.fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.fal,
.#{$fa-css-prefix}-light,
.fat,
.#{$fa-css-prefix}-thin {
  font-family: 'Font Awesome 6 Pro';
}

into

.fa, .x-fa, .x-far, .far,
.#{$fa-css-prefix}-regular {
    font-family: 'Font Awesome 6 Pro Regular';
}
.x-fas, .fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid {
    font-family: 'Font Awesome 6 Pro Solid';
}
.fal,
.#{$fa-css-prefix}-light {
    font-family: 'Font Awesome 6 Pro Light';
}
.fat,
.#{$fa-css-prefix}-thin {
    font-family: 'Font Awesome 6 Pro Thin';
}

This change was required to use the different prefixes.

Step 2: After running my App I noticed only the solid and regular fonts could be used. In ext\packages\font-awesome\sass\src I updated the file all.scss. This file is used to build the final *.scss files. So I added the required missing fonts which my app needed:

@import "../etc/fa-solid.scss";  
@import "../etc/fa-light.scss";  
@import "../etc/fa-thin.scss";  
@import "../etc/fa-duotone.scss";

After running sencha app build development (I mostly use sencha app build -c development to clear the current files) all the required fonts could be used.

I hope this helps.

UPDATE

Important addition.

Not al themes of Extjs work in the same way. After I thought I successfully integrated FA Pro 6.5.1 into Extjs 7.7 I noticed that not all standard icons were shown. Switching between several themes showed different results. So the integration of FA Pro 6.5.1 was NOT so successful as I thought. ☹ It toke some time to find the solution and solve it. Two issues:

• After running my App the final CSS still showed

  font: 16px/29px 'Material Icons', 'Font Awesome 5 Free';

• CSS-rules with pseudo-elements before and after show the content-value without the quotes

  .x-form-trigger-default:before { content: \f0d7; }

I’ll spare you the frustration of last week an show the solution. My App is most og the time using theme-material and for me the following steps solved the issues:

1. I seems Font Amewome 5 Free is hardcoded into Extjs

a) Change ..\ext\classic\theme-neutral\sass\var\Componens.scss Font Awesome 5 Free into Font Awesome 6 Pro Solid

b) Change ..\ext\classic\theme-material\sass\var\Componens.scss Font Awesome 5 Free into Font Awesome 6 Pro Solid

2. Open file ..\ext\classic\theme-neutral\sass\etc\mixins\font-icon.scss

Change the following line (2* :before and :after):

Change @include font-icon-pseudo-content($char, $rotation, $rotation-origin); into

@include font-icon-pseudo-content(unquote("\"\#{$char}\""), $rotation, $rotation-origin);

Now Extjs also show the correct default-icons.

Hope this helps