jquery - all - ui-icon color

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

Question

He estado haciendo un buen uso de los íconos de jQuery en mi aplicación web, pero llegué a un punto en el que me gustaría utilizar un color que no puedo obtener de manera predeterminada. 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) para anular qué imagen de fondo utiliza jQuery para los iconos, de modo que pueda usar un color diferente?

Gracias.

ACLARACIÓN: Supongo que me ayudaría publicar el html en el que estoy trabajando actualmente:

<!-- 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" está actualmente comentado para que pueda verlo. Lo tengo configurado para fadeIn en catch de error. Gracias de nuevo por la ayuda.

Answer 1

Para el archivo CSS almacenado localmente, en este caso, color rojo:

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

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

Puede sobreescribir los iconos con el siguiente CSS:

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

Puede descargar el archivo png de icono en cualquier color que desee. Simplemente cambie la parte de color en la siguiente url:

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

Por ejemplo, si desea iconos rojos y azules de Cornflower, las 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 use la URL como CDN, sea agradable y guarde los archivos localmente)

Answer 4

Utilice el generador de iconos incorporado para el color del icono # 00a300 # verde oscuro

.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

RESPUESTA PROPIA: Especifiqué la URL de la imagen de fondo para ser el archivo que usa los íconos blancos. Así que agregué algunas líneas a mi archivo CSS:

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

Esto básicamente anula la imagen de fondo que el archivo jQuery css predeterminado quiere usar para el icono, y logró el color que yo 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.