7

Estoy usando los iconos de jquery ui en una página, sin embargo me surgió la duda si se puede cambiar el color de los iconos solo con css, es decir: para cambiar el color de los iconos de jquery ui es necesario cambiar la imagen que contiene todos los iconos, por ejemplo:

jquery red jquery blue

Entonces para evitar esto pensé que podría cambiar el color del icono a verde o el color necesario. Ya que si cambio la imagen se cambia el color de todos los iconos, y solo necesito cambiar algunos.

He leído que se puede usar filter en css, pero no se como lograr cambiar el color de la manera que menciono anteriormente.

img { display: block; width: 50%; }

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
<img src="https://i.sstatic.net/fXKdt.png" alt="test">

¿Cómo podría cambiar el color de estas imágenes usando CSS?

2 respuestas 2

10

1. Respuesta directa a tu pregunta

Si te interesa jugar con los filtros, se puede, aunque te recomiendo el 2do método (abajo).

Para cambiar la matiz de colores usando filtros, es una buena idea partir de un color sólido. Por ejemplo, utilicemos el rojo al 100% como imagen original.

Estamos acostumbrados a manejarnos con RGB pero, para los filtros, tenemos que movernos en HSL (matiz, saturación, luminosidad). Por ejemplo:

  • Rojo: HSL( 0°, 100%, 50%)
  • Verde: HSL( 120°, 100%, 50%)

Y para las propiedades CSS filter y backdrop-filter, se usan las funciones hue-rotate(), saturate() y brightness() respectivamente.


Código

  1. Para cambiar del rojo al verde, sólo es necesario rotar el ángulo de la matiz de color 120°.

    filter: hue-rotate(120deg);
    
  2. Otro ejemplo, para el amarillo tenemos que modificar matiz y luminosidad.

    filter: hue-rotate(60deg) brightness(500%);
    
  3. Para otros colores, recomendaría que usen herramientas online como http://www.rapidtables.com/convert/color/rgb-to-hsl.htm (o la que prefieras).

.verde {
  filter: hue-rotate(120deg);
}
.amarillo {
  filter: hue-rotate(60deg) brightness(500%);
}
html {
  width: 800px;
}
<img title="Original rojo"
     class="iconos"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro verde"
     class="verde"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro marillo"
     class="amarillo"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>



2. Una clase para definir el color

Como mencionaste en tu pregunta, se puede cambiar el color de todos los iconos obteniendo el recurso desde:

https://download.jqueryui.com/themeroller/images/ui-icons_<<<color>>>_256x240.png

Por ejemplo para un verde al 100%

https://download.jqueryui.com/themeroller/images/ui-icons_00ff00_256x240.png

Y esto podemos establecerlo en una clase, que sólo se aplique a los iconos que quieras.


Código

Definimos la clase .verde, y sólo la aplicamos en el segundo caso:

.ui-icon.verde {
    background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_00a000_256x240.png);
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery UI -->
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- body -->
<div>
  <span class="ui-icon ui-icon-circle-check"></span>
  <span class="text">ui-icon-circle-check</span>
</div>
<div>
  <!-- 2do caso, con clase "verde" -->
  <span class="ui-icon ui-icon-circle-check verde"></span>
  <span class="text">ui-icon-circle-check verde</span>
</div>

Preferiría hacerlo de este modo, y cargar 1 sola imagen extra de 4.4KB, antes que estar aplicando un filtro sobre cada icono, dependiendo en la renderización del lado del cliente. Los filtros son extremadamente costosos. Opino que es mejor ya tener calculado el color como imagen disponible en tu server.

1
  • 1
    Excelente respuesta @mariano, seguiré tu recomendación usando una imagen!!! +1 Commented el 18 jul. 2017 a las 8:32
-1

con la propiedad filter puedes cambiar el color de una imagen, hay respuestas mas arriba que explican detalladamente como lo puedes hacer yo te aporto este recurso que solamente colocando el color al que quieres cambiar tu imagen en css te devolvera la o las propiedades que debes colocar

2
  • Estas contestando una pregunta de hace 6 años, solo con un enlace.. por favor mira Cómo responder
    – gbianchi
    Commented el 26 sept. 2023 a las 17:10
  • ok gracias lo tendre en cuenta
    – CH19
    Commented el 1 oct. 2023 a las 21:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.