如何设置 unicode 字符的样式？

Question

我想为unicode 字符 DROPLET (💧)设置样式，特别是将蓝色更改为其他颜色。

.red {

  color: red;

  background-color: yellow;

}

<span class="red">DROPLET 💧</span>

该yellow样式将应用于但性格没有色彩（文本是正确称呼）。

是否可以对任何 unicode 字形进行样式设置？

Answer 1

您可以尝试使用过滤器.red {&nbsp; color: red;&nbsp; background-color: yellow;}.red > span {&nbsp; &nbsp;filter: hue-rotate(180deg) saturate(10);}<span class="red">DROPLET <span>💧</span></span>或者 mix-blend-mode 但这也会影响背景：.red {&nbsp; background:#fff;&nbsp; position:relative;&nbsp; display:inline-block;}.red > span {&nbsp; filter:brightness(0); /* We make the icon black */}.red:before {&nbsp; &nbsp;content:"";&nbsp; &nbsp;position:absolute;&nbsp; &nbsp;top:0;&nbsp; &nbsp;left:0;&nbsp; &nbsp;right:0;&nbsp; &nbsp;bottom:0;&nbsp; &nbsp;background:red;&nbsp; &nbsp;pointer-events:none;&nbsp; &nbsp;mix-blend-mode:lighten; /* this will make the icon red since red is more "light" than black*/&nbsp; &nbsp; z-index: 1;}<span class="red">DROPLET <span>💧</span></span>