No Icons after Fontawesome upgrade in ExtJS 6

Question

I have Sencha ExtJS 6 and some of new FontAwesome icons didn't work out. I thought it is due to old version of FontAwesome. Then I decided to upgrade it and I followed this tutorial: https://github.com/yamayamayamaji/extjs-package-fontawesome which says:

Replace your /ext(framework_dir)/packages/font-awesome/ with /font-awesome/

then run sencha app refresh

But after this I cannot see any of FontAwesome icons.

So this:

{
    title: 'Dashboard',
    iconCls: 'fa-home',
    bind:
    {
        html: 'Test'
    }

},

now looks like this:

Any suggestions?

Btw I don't have any errors in Console.

Answer 1

The fontCls parameter is missing.

In ExtJS 6, iconCls is specified with the following notation:

iconCls: '{fontCls} {iconPrefix}-{iconName}'

So, rather than just fa-home, try specifying x-fa fa-home, as below:

iconCls: 'x-fa fa-home'

https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html