assign cls-class at em-tag outside buttons

[MoePi]

I would use sprites for icons. But on using iconCls there is a positioning problem:
The icon does'nt stayes at left side. Text covers it.
So I would use <em> tag:

<em class="" unselectable="on">
    <button id="xyz" class=" x-btn-text ui-silk ui-silk-note-go" type="button">Speichern</button>
</em>

The css-code is unspectacular:

button.ui-silk{ 
    width                   :   16px !important; 
    height                  :   16px !important; 
    background              :   transparent url(/pics-VT/silk-sprite.png)  !important;
    background-repeat       :   no-repeat !important; 
}
.ui-silk-note-go{ 
    background-position     :   -336px -0px !important
}

But, if there are any ideas, how I can position sprites at left side, this would be a solution.

I'm sorry for this bad English and thank you in anticipation for your help!

[mitchellsimoens]

    var button = new Ext.Button({
        renderTo : Ext.getBody(),
        text     : 'Hello',
        iconCls  : 'test'
    });

Will add 18px to the left and you should place your image int he background of the button tag and have it only 16px by 16px (for each sprite)

[MoePi]

The iconCls works perfect with single images. But I want to use sprites.
The effect will show this screenshot: position.png
The background-image is positioned behind the text.
The padding-left:18px is unchanged...

Hope, this better can explain my question.

Thank you for your quick reply

[MoePi]

I think, I've to overwrite onRender for buttons and especially this part

if(position){
    btn = this.template.insertBefore(position, targs, true);
}else{
    btn = this.template.append(ct, targs, true);
}

... but I dont now how.

Oh: I'm using V. 3.2.1

[MoePi]

Can anyone give support, Please?
I couldn't solve this problem...

Thanks in advance!