How do I change the background color of a unicode symbol?

Question

I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?

Answer 1

You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.

 i { background: green; font-style: normal; padding: 2px 4px; } i::before { content: "\\1F0B1"; color: white; } 

 <i class="heart"></i> 

Answer 2

This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode. See code below

 body { background: grey; } i { position: relative; display: inline-block; } i::before{ content: "\\1F0B1"; font-style: normal; color: white; display: block; line-height: 0.8; font-size: 150px; background: green; letter-spacing: -10px; text-indent: -10px; } 

 <i class="heart"></i>