extjsextjs7

Resizing Button Icon in ExtJS 7.6.0

How do I resize the icon size of a button? I'm using ExtJS 7.6.0.

I am currently developing a web application using ExtJS 7.6.0 and I've come across a situation where I need to resize an icon on a button. I've defined the button like this:

{
    xtype: 'button',
    iconCls: 'x-fa fa-sign-out-alt fa-3x',
    flex: 1
}

The iconCls property is set with Font Awesome icon 'sign-out-alt' with a size class 'fa-3x'. However, this does not seem to affect the size of the icon as I expected.

Could anyone suggest a way to resize the icon within a button component in ExtJS? Any help or guidance to relevant resources would be greatly appreciated.

Thank you!

Solution

  • You can resize using the fa-[number]x in iconCls configuration. This will multiply the icon size with the number you put into it. Maybe if you change it's number you can change the size of the icon with the button. Other than that, you'll probably have to use css to style it

    You can change like this:

    xtype: 'button',
iconCls: 'x-fa fa-sign-out-alt fa-2x',//this will make the icon smaller. I put 2x but you can chose other values for it
flex: 1

    Hope it helps!