CODEWITHSUNDEEP
htmlgoogle-chromeunicodeemojiemojione
tim peterson
tim peterson

Reputation: 24305

unicode emojis not showing on Chrome

When I insert unicode emojis into a <span> using standard jQuery they don't appear with Chrome (v48), but do with Firefox (v43) and Safari (v9). Compare these screenshots:

CHROME:

Chrome unicode emoji failure

FIREFOX:

Firefox unicode emoji success

Any explanation here?

Upvotes: 5

Views: 12134

Answers (4)

alex
alex

Reputation: 955

The solution was indeed the combination of all the answers above.

Without the <meta charset utf-8" />, the emoji shows gibberish.

With font-weight: bold, it shows nothing.

With font-weight: 600 it shows bold.

Thanks a lot for asking and answering.

Upvotes: 0

Leviyahu
Leviyahu

Reputation: 41

[] Additionally, if one has this issue and it's not related to the font-weight property, you may need to specify the 'charset' attribute in your head tag;

<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <span>😸</span>
    </body>
</html>

Upvotes: 3

Lucretius
Lucretius

Reputation: 23

It's actually because of the font weight. Set the font-weight to 200px

Upvotes: 1

tim peterson
tim peterson

Reputation: 24305

The issue is that the span had font-weight:bold. As soon as I put font-weight:normal, the emojis appeared.

Upvotes: 7

Related Questions