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

Question

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

所以，如果我有这样的事情：

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

我看到标准的齿轮图标，我可以从煎茶触摸应用以下的CSS看似乎大小来控制，我可以更改值并看到图标更改大小。

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

我不能完全得到的按钮显示为我所需要的，感觉有点哈克给我，所以我想知道有没有在煎茶触摸的象形字图标作业时，关于重新任何推荐的方式 - 这些？

Answer 1

如果你想要快速的方法来改变它，你可以再补充重要的是到底喜欢你font-size: 1.3em !important;

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

还有，如果你要编译的青菜，你可以使用全局图标大小变量。

如果你进入资源/上海社会科学院/ 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 

下面是一些参考煎茶触摸文档上的按钮图标

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

您可以通过修改这些得到很远。

当你想看到改变你的应用程序，你可以使用煎茶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