CODEWITHSUNDEEP
htmlcsstextemoji
user3163495
user3163495

Reputation: 3672

"Heavy Plus Sign" ➕ in CSS ::before?

I am trying to get the code for the "Heavy Plus Sign" emoji (➕) working in a CSS ::before pseudo-element. The Unicode number for it is U+2795. My [non-working] code is as follows:

.plussign::before {
    content: "\12795";
}

When I assign an element to use class="plussign", all I see is a little black square (the generic unknown character)

What should I use for the "content" property? The slash-one (\1) method works for all my other emojis. For example, this works for the gemstone (💎, Unicode U+1F48E):

.gem::before {
    content: "\1F48E";
}

Why doesn't the "Heavy Plus Sign" emoji work in the same format?

Upvotes: 4

Views: 9989

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075189

You're looking for \2795 (no leading 1, the codepoint is U+2795, not U+12795):

.plussign::before {
  content: "\2795";
}
<div class="plussign"></div>

Or of course, the character itself:

.plussign::before {
  content: "➕";
}
<div class="plussign"></div>

Upvotes: 6

Related Questions