ExtJS 7.6.0按钮图标尺寸调整方法咨询

直接给按钮的iconCls加fa-3x无效，是因为ExtJS按钮的图标被包裹在内部的.x-btn-icon-el元素中，Font Awesome的尺寸类样式无法直接作用到这个子元素上。以下是几种可行的解决方式：

方法1：自定义CSS类定位图标元素 #

先写一个自定义CSS类，精准定位按钮内的Font Awesome图标：

/* 自定义大尺寸图标类 */
.btn-icon-3x .x-btn-icon-el.x-fa {
    font-size: 3em; /* 和fa-3x的尺寸一致 */
}

然后在按钮配置中引用这个类：

{
    xtype: 'button',
    iconCls: 'x-fa fa-sign-out-alt',
    cls: 'btn-icon-3x', // 应用自定义样式类
    flex: 1
}

方法2：使用iconStyle内联设置样式 #

如果只需要单独调整某个按钮的图标，直接用iconStyle属性内联设置字体大小更快捷：

{
    xtype: 'button',
    iconCls: 'x-fa fa-sign-out-alt',
    iconStyle: 'font-size: 3em;', // 直接设置图标尺寸
    flex: 1
}

方法3：全局统一调整按钮图标尺寸 #

如果需要所有按钮的Font Awesome图标都使用统一尺寸，可以覆盖ExtJS的默认样式：

/* 全局设置按钮内的Font Awesome图标大小 */
.x-btn-icon-el.x-fa {
    font-size: 2em; /* 根据需求调整数值 */
}

内容的提问来源于stack exchange，提问作者Vinicius Donatto