How to style a unicode character?

user_903011 0
Viewed 3341

I would like to style the unicode character DROPLET (), specifically change the blue color to something else.

.red {
  color: red;
  background-color: yellow;
}
<span class="red">DROPLET </span>

The yellow style is applied but not the color of the character (the text is correctly styled).

Is styling any unicode glyph possible?

unicode css javascript
1 Answers

You can try with filter

.red {
  color: red;
  background-color: yellow;
}
.red > span {
   filter: hue-rotate(180deg) saturate(10);
}
<span class="red">DROPLET <span></span></span>

Or mix-blend-mode but this will also affect the background:

.red {
  background:#fff;
  position:relative;
  display:inline-block;
}
.red > span {
  filter:brightness(0); /* We make the icon black */
}
.red:before {
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background:red;
   pointer-events:none;
   mix-blend-mode:lighten; /* this will make the icon red since red is more "light" than black*/
    z-index: 1;
}
<span class="red">DROPLET <span></span></span>

user_86203330
Related