1

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!

Vinicius Donatto
  • 145
  • 2
  • 8

2 Answers2

2

To accomplish this, we can utilize CSS and handle the dimensions of the button. Please refer to the provided fiddle example.

fiddle

Gaurav
  • 171
  • 4
1

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!

Felipe da Cunha Bueno
  • 61
  • 4