¿Puedo configurar un ícono personalizado para un botón jQueryUI?

Question

¿Es posible crear un botón jQueryUI con un ícono personalizado, es decir: un ícono que no es parte de los íconos de sprites que están provistos con jQueryUI ???

estoy usando la funcionalidad buttonset para un grupo de 3 casillas de verificación, pero necesito un icono más estilizada de lo que se proporciona fuera de la caja ...

Answer 1

trabajado a cabo con un hack CSS.

el botón de configuración con normalidad y dar el icono principal de la clase "error" se define a continuación

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

El anulaciones importantes la definición ui-icon! Imagen de fondo para.

Answer 2

Tomé este enfoque para uno de los botones de mi y he descubierto algunas cosas interesantes:

1. no necesitaba utilizar la anulación
2. que necesitaba para establecer background-position para "importante!" mi botón (de lo contrario, creo que el fondo se mostraba fuera del botón)
3. Parece que también puede poner lo que desee en el nombre del icono principal de jQueryUI; solo necesita algo como marcador de posición.

Para mis usos que terminó con:

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>