I am posting the steps here for anyone who wants to upgrade their ExtJS 6.x application to Font Awesome 5 Free. I was able to upgrade ExtJS 6.7 with Font Awesome 5.10.2

Credit goes to: https://jnesis.com/en/how-to-take-ad...-applications/


  • Download Font-Awesome 5 Free and extract it to fontawesome-free-5.x.x-web


  • Generate the font-awesome-5 package at the worskspace OR application level

sencha generate package font-awesome-5

  • Copy ext/packages/font-awesome/sass/etc/all.scss into packages/local/font-awesome-5/sass/etc/


  • Copy ext/packages/font-awesome/sass/src/all.scss into packages/local/font-awesome-5/sass/src/


  • Create a new fonts folder within packages/local/font-awesome-5/resources/


  • Copy all files from fontawesome-free-5.x.x-web/webfonts/ into packages/local/font-awesome-5/resources/fonts/


  • Copy sass files from fontawesome-free-5.x.x-web/scss/ into packages/local/font-awesome-5/sass/etc/


  • Update packages/local/font-awesome-5/sass/etc/_variables.scss : put all variable values between double quotes "\fxxx"


  • Update packages/local/font-awesome-5/sass/src/all.scss as follows:


HTML Code:
        @import "../etc/regular.scss";
        @import "../etc/solid.scss";
        @import "../etc/brands.scss";
        @import "../etc/_variables";
        @import "../etc/_core.scss";
        @import "../etc/_larger.scss";
        @import "../etc/_fixed-width.scss";
        @import "../etc/_list.scss";
        @import "../etc/_bordered-pulled.scss";
        @import "../etc/_animated.scss";
        @import "../etc/_rotated-flipped.scss";
        @import "../etc/_stacked.scss";
        @import "../etc/_icons.scss";

        //Override fa-content
        @function fa-content($fa-var) {
            @return "#{ $fa-var }" !important;
        }        ....

  • Update packages/local/font-awesome-5/package.json as follows:


HTML Code:
​... ... ...

        "sass" : {
            "namespace": "FontAwesome5",

            "etc": [
                "${package.dir}/sass/etc/all.scss",
                "${package.dir}/sass/etc/v4-shims.scss"
             ],

            "var": [
                "${package.dir}/sass/var"
            ],

            "src": [
                "${package.dir}/sass/src",
                "${package.dir}/sass/src/all.scss"
            ]
        },

        "resources": [{
            "path": "${package.dir}/resources",
            "output": "shared"
        }],
... ... ...

  • And finally update your aplication app.json file to reference font-awesome-5 in place of font-awesome:


HTML Code:
​    "requires": [
        // "font-awesome"
        "font-awesome-5"
    ],