CODEWITHSUNDEEP
htmlcss
Raskolnikov
Raskolnikov

Reputation: 3999

How to show Unicode Character 'BLACK CIRCLE FOR RECORD' in red and green color

I would like to show Unicode Character 'BLACK CIRCLE FOR RECORD' in red and green color. http://www.fileformat.info/info/unicode/char/0023FA/index.htm

This is my html with css

<!DOCTYPE html>
<html>
<body>
  <div color="red">⚫</div>
  <div color="red">&#x23FA</div>
</body>
</html>

But I dont get expected result

Any suggestion how to fix this? Result: https://jsfiddle.net/y8uz25Lv/

enter image description here

Upvotes: 1

Views: 1930

Answers (2)

Quentin
Quentin

Reputation: 944016

This isn't technically possible.

The horrible hack is to hide the emoji itself and show a shadow instead.

.red {
  color: transparent;
  text-shadow: 0 0 0 red;
}
<div class="red">⚫</div>

Warning: This will destroy the shading on the emoji as a side effect.

A better solution would probably be to use a more appropriate character (such as U+2B24) in the first place.

.red    { color: red; }
.yellow { color: yellow; }
.green  { color: green; }
<div class="red">⬤</div>
<div class="yellow">⬤</div>
<div class="green">⬤</div>

Upvotes: 3

Nico Zimmer
Nico Zimmer

Reputation: 318

https://emojipedia.org/emoji/%E2%9A%AB/

Its a Black Circle. You can´t colorize it.

Use &#x1f534

Upvotes: 0

Related Questions