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

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

Answer 1

如果您想要快速更改它的方法，您可以像您一样在末尾添加 important font-size: 1.3em !important;

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

如果要编译 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 文档参考

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

还有

这是全局 CSS 变量的列表，您可以将其放入 app.scss

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 - 如何调整按钮上使用的象形图标的大小

Sencha Touch - How to Resize picto icons used on buttons

extjs

sencha-touch

sencha-touch-2