Bouton jQuery UI - Texte sous l'icône personnalisée

Question

J'essaie de créer un bouton jQuery UI avec une icône personnalisée en haut du texte. Le comportement par défaut crée une icône sur la gauche/droite du texte, mais je veux que l'icône soit sur le dessus! Cela peut-il être fait? Si oui, votre aide/conseils est grandement appréciée.

En outre, comment peut-on avoir une icône personnalisée de taille 32x32 (même en augmentant la hauteur du bouton n'a pas aidé et dépouillait l'icône). Merci d'avance.

HTML:

<button id="btnSave">Save</button> 

JS:

$('#btnSave').button({ 
    icons: {primary: "saveIcon"} 
}); 

CSS:

.saveIcon { 
    background-image: url(../images/Save.png) !important; 
} 

Answer 1

Essayez ce morceau de CSS (demo):

.ui-button-icon-primary.ui-icon.saveIcon { 
    height: 32px; 
    width: 32px; 
    margin: 10px 0 2em -16px; 
    text-align: center; 
    left: 50%; 
    top: 5px; 
    background-image: url(../images/Save.png) !important; 
} 
.ui-button-text-icon-primary .ui-button-text { 
    display: block; 
    position: static; 
    padding: 50px 10px 5px 10px; 
}