Possibility to upgrade/implement Font Awesome 5 Pro in Ext JS 7.X

[[email protected]]

We recently updated Ext JS 7.0.0.156, Font Awesome 5 to "Font Awesome 5 Pro".


We found a variable through the Sencha Themer called: "$enable-font-awesome".
It does not look like it ever got implemented, but would be nice if we could disable "Font Awesome 5 Free" with that.
In the following the implementation of "Font Awesome 5 Free" in Sencha is referred to as "Sencha Font Awesome".


---


Implementation steps:
1. package.json, add fontawesome-pro as a dependency:


"@fortawesome/fontawesome-pro": "^5.11.2"



2. Replace function: "fa-content", in "node_modules\@sencha\ext-font-awesome\sass\etc\_variables.scss":


@function fa-content($fa-var) {
@if str-index($fa-var, "'\\") == 1 {
@return unquote("#{ $fa-var }");
} @else {
@return unquote("'\\#{ $fa-var }'");
}
}

Changing the function, ensures Font Awesome 5 Pro variables, and Sencha Font Awesome variables are valid.


3. app.json, add resource:


"resources": [
...
{
"path": "${workspace.dir}/node_modules/@fortawesome/fontawesome-pro/webfonts",
"output": "shared"
}
...
]

Ensures the Font Awesome 5 Pro fonts, are added as a build resources.


4. package.json for theme, add variables:


"var": [
...
"${workspace.dir}/node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss",
"${package.dir}/sass/var/fontawesome-overrides.scss",
...
]



5. fontawesome-overrides.scss:


$fa-font-path: "../../resources";




/*!
* Font Awesome Pro 5.11.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url("#{$fa-font-path}/fa-solid-900.eot");
src: url("#{$fa-font-path}/fa-solid-900.eot?#iefix") format("embedded-opentype"),
url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2"), url("#{$fa-font-path}/fa-solid-900.woff") format("woff"),
url("#{$fa-font-path}/fa-solid-900.ttf") format("truetype"),
url("#{$fa-font-path}/fa-solid-900.svg#fontawesome") format("svg");
}




.fa,
.fas {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
}




/*!
* Font Awesome Pro 5.11.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url("#{$fa-font-path}/fa-regular-400.eot");
src: url("#{$fa-font-path}/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("#{$fa-font-path}/fa-regular-400.woff2") format("woff2"),
url("#{$fa-font-path}/fa-regular-400.woff") format("woff"),
url("#{$fa-font-path}/fa-regular-400.ttf") format("truetype"),
url("#{$fa-font-path}/fa-regular-400.svg#fontawesome") format("svg");
}




.far {
font-family: "Font Awesome 5 Pro";
font-weight: 400;
}




/*!
* Font Awesome Pro 5.11.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: 300;
font-display: $fa-font-display;
src: url("#{$fa-font-path}/fa-light-300.eot");
src: url("#{$fa-font-path}/fa-light-300.eot?#iefix") format("embedded-opentype"),
url("#{$fa-font-path}/fa-light-300.woff2") format("woff2"), url("#{$fa-font-path}/fa-light-300.woff") format("woff"),
url("#{$fa-font-path}/fa-light-300.ttf") format("truetype"),
url("#{$fa-font-path}/fa-light-300.svg#fontawesome") format("svg");
}




.fal {
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}

Ensures the font path points to the correct resource, and defines the Font Awesome 5 Pro fonts.


6. Find and override the font-family, "Free" -> "Pro" version.


Known issues:
- Sencha Themer does not show icons after the change to Pro.
- Sencha Font Awesome fonts, are still added as build resources.
- Font Awesome 5 Pro fonts, needs to be manually added (step 3).


Wish:


It would be greatly appreciated if we could disable Sencha Font Awesome, and implement Font Awesome 5 Pro without changing NPM packages.

Override the function "fa-content", so it supports both Native variables and Sencha Font Awesome Variables
Alternatively, change variables so that they work the same as Native Font Awesome 5.


Use a dynamic variable when declaring font-family ("Font Awesome 5 Free/Free Regular/Brands").
When adding resources, it would be a great improvement, if we could define an output-path, when defining resources, like:

"../Font Awesome/webfonts" -> "output-path": "webfonts",
and resources are available in "resources/webfonts"

[maciej.zabielski]

I'm using FA (fontawesome_5_10_0 PRO) with SVG (and FontAwesomeConfig = { autoReplaceSvg: 'nest' })but it's a bit tricky as it will replace some parts of DOM causing all sorts of issues in Ext.
It requires custom dev. in places like Action Column etc. It would be great to see native support for FA - SVG in both classic and modern toolkit!
It would also be fantastic if we can swap ALL system icons with FA SVGs (e.g. next page, window tools etc)