CODEWITHSUNDEEP
css
Jon
Jon

Reputation: 453

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

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?

Upvotes: 2

Views: 3135

Answers (2)

blecaf
blecaf

Reputation: 1645

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>

Upvotes: 4

Bram Vanroy
Bram Vanroy

Reputation: 28505

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>

Upvotes: 3

Related Questions