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