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:
Code:
    "@fortawesome/fontawesome-pro": "^5.11.2"

2. Replace function: "fa-content", in "node_modules\@sencha\ext-font-awesome\sass\etc\_variables.scss":
Code:
@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:
Code:
"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:
Code:
"var": [
	...
    "${workspace.dir}/node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss",
    "${package.dir}/sass/var/fontawesome-overrides.scss",
	...
]

5. fontawesome-overrides.scss:
Code:
$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:

  1. It would be greatly appreciated if we could disable Sencha Font Awesome, and implement Font Awesome 5 Pro without changing NPM packages.
    1. Override the function "fa-content", so it supports both Native variables and Sencha Font Awesome Variables
    2. Alternatively, change variables so that they work the same as Native Font Awesome 5.

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