Cómo especificar (anular) el color del icono de JQuery

Question

He estado haciendo un buen uso de los íconos jQuery en mi aplicación web, pero llegué a un punto en el que me gustaría utilizar un color que no puedo lograr por defecto. Actualmente estoy usando el tema "State Street", que usa principalmente verde. Pero tengo un recuadro rojo con texto blanco y me gustaría usar un icono que también sea blanco. Hay iconos blancos que se suministran con el tema, pero solo se aplican cuando los iconos están dentro de un div (u otro contenedor) que tiene una clase de "ui-state-focus". Esto hará que el icono sea blanco, pero cambiará el color de fondo a verde, que quiero dejar en rojo.

¿Hay alguna manera (muy probablemente a través de CSS) de sobrescribir la imagen de fondo que jQuery usa para los iconos, para que pueda usar un color diferente?

Gracias.

ACLARACIÓN: supongo que ayudaría a que me cree el html Actualmente estoy trabajando con:

<!-- currently produces a default 'grey' icon color --> 
<!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div --> 
<div id="errorMessage"> 
    <span class="ui-icon ui-icon-alert" style="float: left"></span> 
    Only 1 Activity can be added at a time 
</div> 

También tengo CSS:

.dialog #errorMessage 
{ 
    /*display: none;*/ 
    background-color: #CC3300; 
    color: #FFFFFF; 
    font-weight: bold; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    vertical-align: bottom; 
    bottom: auto; 
    font-size: .80em; 
    width: 100% 
} 

"display: none" Actualmente está comentada para que pueda verla. Lo tengo configurado para fadeIn en catch de error. Gracias de nuevo por la ayuda.

Answer 1

puede sobrescribir los iconos con el siguiente CSS oscuro:

.ui-icon 
{ 
    background-image: url(icons.png); 
} 

Puede descargar el archivo png icono en cualquier color que te guste Sólo cambia el color de la parte en la siguiente dirección:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png 

Por ejemplo, si quieres iconos rojos, y los iconos de azul aciano, las direcciones URL que necesita son:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png 
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png 

etc.

(pero no utilice la dirección URL como un CDN, ser agradable y guardar los archivos localmente)

Answer 2

Probablemente la forma más sencilla de hacerlo es averiguar exactamente qué archivo de imagen está usando jQuery para los iconos, y luego modificar ese archivo de imagen (o crear uno propio) y colocarlo en su lugar.

Answer 3

RESPUESTA AUTORRECTA: Especifiqué la URL de la imagen de fondo como el archivo que utiliza los iconos blancos. Así que he añadido unas líneas a mi archivo CSS:

.dialog #errorMessage .ui-icon 
{ 
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png); 
} 

Esto anula esencialmente la imagen de fondo que el archivo de jQuery css por defecto quiere utilizar para el icono, y ha logrado el color que quería. Por supuesto, esto solo funcionó porque se incluyó un archivo de icono blanco .png con el tema. Si quisiera un color loco, como el morado, habría necesitado crear mis propios íconos. Tenga en cuenta que necesitaba alargar la URL en mi propio archivo CSS en comparación con la URL que se especifica en el archivo jQuery CSS, porque están ubicados en dos lugares diferentes en mi fuente.

Answer 4

uso integrado en el generador de icono de icono de color # 00a300 # verde

.ui-icon 
{ 
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important; 
} 

Answer 5

para el archivo css almacenado localmente en este caso de color rojo:

<style> 
#my_id .ui-icon { 
    background-image: url(my_css_file_location/ui-icons_cd0a0a_256x240.png); 
} 
</style>}