How would I change the color of an emoji?

Question

I have an emoji, and I want it to be white, but when I run the program it appears red. How do I change it to white?

rating.text = \"\\(♥♥♥♥♥)\"
rating.textCo         


        

Answer 1

The following answer explains why you can't change the color of Emoji characters. The glyphs are essentially images.

If you want to be able to use a heart symbol that you can color, try using one of the non-Emoji heart characters like ♥︎.

Or ensure the label's font isn't using the Apple Color Emoji font.

Answer 2

I needed to do this for a project and found a couple of ways to go about it. Each has its limitations, but still, usefull tricks to know.

First, you could append the unicode text presentation selector after the emoji to get it to render as text, then use your font color.

Limitations:

1. Text representation of that emoji might not be available and you get unknown character representation instead.

2. The detail of the text representation is often less

Alternatively, you can use CSS filters on the emoji itself to change its hue (plus saturation, contrast, grayscale, etc)

Limitations:

1. Requires access to the page's css (Works fine for your own webpage, but you couldn't, for instance, use this within an instagram post)

2. The emoji graphic is application-dependent, so the outcome could be unpredictable. For instance, the folder icon on firefox is (presently) an ugly blue color. I filter it to a yellow tint, but on other browsers (which render it yellow to start with) the code below will cause the very problem I was trying to fix!

Anyway, here are some examples with both css and html variations of the approaches:

.folderitem_normal:before {
	content:'\1f4c2';
	margin-right:4px;
}

.folderitem_presentation_selector:before {
	color: magenta;
	content:'\1f4c2\FE0E';
	margin-right:4px;
}

.folderitem_css_filter:before {
	content:'\1f4c2';
	filter: hue-rotate(180deg) brightness(1.5);
	margin-right:4px;
}

<div class="folderitem_normal">Normal appearance of emoji for comparison (HTML &#x1f4c2;)</div>

<div class="folderitem_presentation_selector">Presentation selector.  Notice how it has been colored like normal text.  (HTML &#x1f4c2;&#xFE0E;)</div>

<div class="folderitem_css_filter">Css filter looks nice, but results are application-dependent. (HTML = N/A)</div>