Saltar al contenido

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

Rodrigo, parte de este equipo, nos ha hecho el favor de redactar este escrito ya que domina a la perfección dicho tema.

Solución:

Puede sobrescribir los iconos con el siguiente CSS:

.ui-icon

    background-image: url(icons.png);

Puede descargar el archivo png del icono en el 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 íconos rojos e íconos 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

Rojo

azul aciano

etc.

(pero no use la URL como un CDN, sea amable y guarde los archivos localmente)

AUTO-RESPUESTA: Yo mismo especifiqué que la URL de la imagen de fondo es 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);

Básicamente, esto anula la imagen de fondo que el archivo jQuery css predeterminado quiere usar para el ícono y logró el color que quería. Por supuesto, esto solo funcionó porque se incluyó un archivo .png de icono blanco con el tema. Si quisiera un color loco, como el púrpura, habría tenido que crear mi(s) propio(s) icono(s). 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.

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

.ui-icon

    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd

Si crees que ha sido provechoso este post, nos gustaría que lo compartas con otros seniors de esta manera contrubuyes a difundir esta información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *