I am using the icons jquery ui
on a page, however I was wondering if you can change the color of the icons only with css
, that is: to change the color of the icons jquery ui
it is necessary to change the image that contains all the icons, for example:
So to avoid this I thought I could change the color of the icon to green or whatever color is needed. Since if I change the image the color of all the icons is changed, and I only need to change some of them.
I have read that it can be used filter
in css
, but I don't know how to change the color in the way I mentioned above.
img { display: block; width: 50%; }
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
<img src="https://isstatic.aoverflow.com/fXKdt.png" alt="test">
How could I change the color of these images using CSS
?
1. Direct answer to your question
If you are interested in playing with the filters, you can, although I recommend the 2nd method (below).
To change the hue of colors using filters, it's a good idea to start with a solid color. For example, let's use 100% red as the original image .
We are used to dealing with RGB but, for filters, we have to move in HSL (Hue, Saturation, Lightness). For example:
HSL( 0°, 100%, 50%)
HSL( 120°, 100%, 50%)
And for the CSS
filter
and propertiesbackdrop-filter
, the hue-rotate() , saturate() , and brightness() functions are used, respectively.Code
To change from red to green, it is only necessary to rotate the angle of the color cast by 120°.
Another example, for yellow we have to modify hue and lightness.
For other colors I would recommend using online tools like http://www.rapidtables.com/convert/color/rgb-to-hsl.htm (or whatever you prefer).
2. A class to define the color
As you mentioned in your question, you can change the color of all the icons by getting the resource from:
For example for a green at 100%
And we can set this in a class, which only applies to the icons you want.
Code
We define the class
.verde
, and only apply it in the second case:I'd rather do it this way, and load a single extra 4.4KB image, rather than be applying a filter on each icon, depending on client-side rendering. Filters are extremely expensive. I think it is better to already have the color calculated as an image available on your server.