Extjs Sencha Touch-如何调整按钮上使用的picto图标的大小

我想在Sencha Touch应用程序的工具栏上的按钮上使用更小版本的picto图标

所以如果我有这样的东西：

{
    xtype: 'button',
    align: 'right',
    iconCls: 'settings'
}

我看到了标准的齿轮图标，我可以从Sencha Touch应用的css中看到，以下内容似乎控制了大小，因为我可以更改值并看到图标更改大小

.x-toolbar .x-button .x-button-icon:before {
font-size: 1.3em;
line-height: 1.3em;
}

---

我无法按需要显示按钮，感觉有点不对劲，因此我想知道在Sencha Touch中使用picto图标时，有没有推荐的方法来重新调整这些图标的大小？

如果您希望快速更改按钮，您可以在末尾添加重要内容，如

字体大小：1.3em！重要的


如果要编译sass，可以使用全局图标大小变量

如果进入resources/sass/app.scss，您可以像这样添加此变量

// ADD VARS ABOVE @import
$toolbar-icon-size : 1.3em;

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// other scss/css goes here

这里有一些关于Sencha Touch按钮图标文档的参考


也

下面是一个全局CSS变量列表，您可以将其放入
app.scss


通过修改这些，您可以走得很远

当您想查看应用程序的更改时，可以使用Sencha Cmd

// CD to dir containing your touch folder
// This command will watch for changes and compile every time.
// Will also help you find errors you might have missed.

$ cd path/to/MyApp && sencha app watch

试试
.settings{font-size:25px；}
。谢谢，这有助于meNice回答，谢谢链接，这对我有帮助