resize add, edit and delete icons

[marion]

I am amending the CSS files to tailor buttons and screens to suit our company layout and it will be necessary to resize the icons depending on the amount of data on the screen.  I have made some modifications which reduce the size of the text box and text, but I cannot successfully get the image icon to shrink.  I have managed to remove the icon to just display text, but ideally I would like the button to either display the icon and text if the the button is big enough but just text if the button is small.  At the moment when text only is displayed the text is off centre.  My code for the button and the icon is as follows:
.k-button.k-button.k-button-icontext {
    /*background-position: top;*/
    font-style: normal;
    font-family: Calibri;
    font-weight: normal;
    font-size: small;
    border-image-outset: 0px;
    /*height: 16px;*/ /*font-size-adjust: inherit;*/
    vertical-align: top;
    text-align: center;
    white-space: normal;
    /*overflow: auto;*/
    margin: 0px,0px,0px,0px;
    }

.k-icon {
    /*fit:slice;*/
    /*background-image:none;*/    
    display: inline-block;
    width:auto;
    height:auto;
    background-size:contain;
}
I also have another button which does not have an icon which needs to be the same size as these buttons which is why I need generic code to suit the row height.
As you can see I was experimenting with some other options - with the current settings the icon is not being displayed although I think there is enough room.  Any suggestions of amending the code gratefully received.

[Dimo]

Hi Marion,

I see that you have removed the width and height of the k-icon class, but this class requires dimensions in order to display its background image correctly.

You can set different width and height to k-icon, and then use the background-size CSS property to resize the background image, but this is a cumbersome approach when using sprites, that's why I don't recommend it. An easier technique would be to use font icons injected inside the <span class="k-icon"> elements with :before or :after pseudo-elements.

Regards,
Dimo
Telerik