5

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?

WoJ
  • 27,165
  • 48
  • 180
  • 345
  • You might want to use Icons instead, it's way easier to style and play with. I highly suggest [fontawesome](https://fontawesome.com/), but there is a ton of icons pack out there. – Nicolas Oct 18 '19 at 12:13

1 Answers1

7

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • If you separate the character into its own span you can just apply a `color`. No need to complicate things. – Paulie_D Oct 18 '19 at 12:18
  • @Paulie_D but color isn't working, this the main issue – Temani Afif Oct 18 '19 at 12:19
  • Sure it does - https://codepen.io/Paulie-D/pen/YzzGdvo - Version 78.0.3904.63 (Official Build) beta (64-bit) – Paulie_D Oct 18 '19 at 12:22
  • @Paulie_D it doesn't on Chrome (at least for me) – Temani Afif Oct 18 '19 at 12:22
  • @Paulie_D: it does not either for me (Chrome) - this is what I tried in the question. – WoJ Oct 18 '19 at 12:23
  • It does in my Chrome...it's basic CSS...the fact that it's a unicode character is irrelevant – Paulie_D Oct 18 '19 at 12:23
  • @Paulie_D even in Firefox it doesn't work (using Windows) and unicode aren't always the same as simple character, you cannot change the coloration of emoji defined with unicde like you want. – Temani Afif Oct 18 '19 at 12:25
  • @Paulie_D: I was about to say the same thing as Temani: it does not work in my FF either – WoJ Oct 18 '19 at 12:26
  • 1
    It's not a browser thing, it only depends on the font used. If @Paulie's system defaults to a solid color font for emojis, then indeed they will see it colored as they authored it, if however they had a color emoji font as default for emojis (as it is in most OS by default), then they would have experienced the same issue). Which means that an other solution is to load a web-font that has these emoji as solid color. – Kaiido Oct 18 '19 at 13:13