Кнопка пользовательского интерфейса jQuery - текст под пользовательским значком

Question

Я пытаюсь создать кнопку пользовательского интерфейса jQuery с пользовательским значком в верхней части текста.Поведение по умолчанию создает значок слева / справа от текста, но я хочу, чтобы значок был вверху!Можно ли это сделать?Если это так, ваша помощь / руководство очень ценится.

Кроме того, как можно получить пользовательский значок размером 32x32 (даже увеличение высоты кнопки не помогло и лишило значок).Заранее спасибо.

HTML:

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

JS:

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

CSS:

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

Answer 1

Попробуйте этот бит CSS ( демо ):

.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;
}