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

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;
}

Normal appearance of emoji for comparison (HTML 📂)

Presentation selector.  Notice how it has been colored like normal text.  (HTML 📂︎)

Css filter looks nice, but results are application-dependent. (HTML = N/A)