Isso é devido provavelmente à fonte que você escolheu.
Você pode definir uma fonte com suporte para emojis como noto-fonts-emoji
e fonts-noto-color-emoji
. Ou você pode usar uma biblioteca JavaScript como a Twemoji
.
Para usar ela é simples, acho até que vou fazer um post explicando isso.
Você vai ter que adicionar essa tag dentro da tag head
do seu HTML (para importar o Twemoji):
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
E depois do fechamento da tag <body>
, você adiciona essa tag:
<script>
twemoji.parse(document.body);
</script>
Com esse código, o Twemoji vai percorrer toda a página procurando por emojis e trocar eles por uma imagem, o mesmo emoji vai ser visto por todos os navegadores.
Ah, o emoji vai ficar gigante, então você vai ter que ajustar o tamanho dele através do CSS, só de copiar já vai ficar certo (você pode ajustar o tamanho se ficar errado):
.emoji {
width: 1rem;
height: 1rem;
}