Posso definir um ícone personalizado para um botão jQueryui

Question

É possível criar um botão jQueryui com um ícone personalizado, ou seja: um ícone que não faz parte dos ícones sprite que são fornecidos com jQueryui ???

Estou usando a funcionalidade do botão para um grupo de 3 caixas de seleção, mas preciso de um ícone mais estilizado do que o fornecido pela caixa ...

Answer 1

Trabalhou com um hack do CSS.

Configure o botão conforme normal e dê ao ícone primário a classe "Erro" definida abaixo

.Error
{
    background-image: url('Images/Icons/16/Error.png') !important;
}

A! IMPORTANTE substitui a definição da UI-ICON para a imagem de fundo.

Answer 2

Eu adotei essa abordagem para um dos meus botões e descobri algumas coisas interessantes:

1. Eu não precisava usar a substituição "! IMPORTANTE"
2. Eu precisava definir a posição de fundo para o meu botão (caso contrário, acho que o fundo estava sendo exibido bem fora do botão)
3. Parece que você também pode colocar o que quiser no nome do ícone primário jQueryui - ele só precisa de algo como espaço reservado.

Para meus usos, acabei com:

JavaScript:

jQuery(function() {
    jQuery('#share-button').button({
        icons: { primary: "icons/share" }
    });

});

CSS:

#share-button > span.ui-icon {
    background-image: url(icons/share.png);
    background-position:0px 3px;}

Html:

<button id='share-button'>Share</button>