Search code examples
iconssencha-touchsencha-touch-2sasssencha-touch-theming

Sencha Touch 2.2 icons not displaying with Base theme


I'm trying to make my own custom theme, for this I import the Base theme.

I'm trying to add icons to buttons like this :

{
    xtype: 'button',
    align : 'left',
    name : 'btnName',
    iconCls : 'team',
    iconMask: 'true'
}

The icon isn't showing, but if I use the default theme they are. And I already set the variable $include-default-icons to true.

My custom button:

@mixin modus-button($color) {
    @include transition(all .25s ease);
    @include border-radius(6px);
    margin-bottom: 15px;
    font-size: 15px;
    background: $color;
    border: none;
    color: white;
    text-decoration: none;

    .x-button-label {
        padding: 10px 0;
    }

    &.x-button-pressing {
        background: darken($color, 10);
    } 

    // Default icon style
    .x-button-icon {
        width: 1.5em;
        height: 1.5em;

        &:before {
            font-size: 1.6em;
            line-height: 1em;
        }
    }
}

What should I add to display icons with base theme ?


Solution

  • try including icon

    @include icon('team');
    

    also take a look at following useful links

    Several pictos icons in 2.1 not available in 2.2

    Adding Custom Font Icons to Sencha Touch 2.2