Question

我想在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图标时是否有任何推荐的方法来重新调整大小这些？

Answer 1

如果您想快速更改它，可以像font-size: 1.3em !important;

一样添加重要内容

http://codepen.io/Trozdol/pen/bNjwNm/

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

如果你进入资源/ 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 Docs的参考资料

http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.Button-css_var-S-toolbar-icon-size

另外

您可以在app.scss

中找到全局CSS变量列表

http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Global_CSS

你可以通过修改这些来达到目的。

如果您想查看应用程序的更改，可以使用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

Sencha Touch - 如何调整按钮上使用的图标图标

1 个答案: