Search code examples
extjssencha-touchsencha-touch-2

Sencha Touch - How to Resize picto icons used on buttons

I would like to use smaller versions of the picto icons on buttons in a toolbar of my Sencha Touch app.

So if I have something like this:

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

I see the standard cogwheel icon, and I can see from the css applied by Sencha Touch the following seems to control the size as I can change the values and see the icon change size.

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

I can't quite get the button to appear as I need, it feels a bit hacky to me and so I wondered are there any recommended ways when working with the picto icons in Sencha Touch with regards to re-sizing these?

Solution

  • If you are wanting the quick way to change it you can just add important to the end like you font-size: 1.3em !important;

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

    There's a global icon size variable you can use if you want to compile the sass.

    If you go into resources/sass/app.scss you can add this variable like so..

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

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

// other scss/css goes here

    Here's some reference to the Sencha Touch Docs on button icons

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

    Also

    Here's a list of Global CSS Variables you can into the app.scss

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

    You can get pretty far by modifying these.

    When you want to see changes to your app you can use 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