Adicionar suporte Emoji ao seu site com CSS Emoji

Os emojis tomaram conta das conversas digitais e esses pequenos ícones bonitinhos rapidamente permearam a cultura da Internet com um estrondo. Eles agora são uma parte do dia-a-dia de nossas vidas e você pode encontrá-los em todos os lugares, de aplicativos de desktop a WordPress.

E se você sempre quis emojis personalizados no seu site, então Emoji CSS é a biblioteca perfeita para usar.

Estes ícones CSS puros são gerado com imagens de fundo assim cada emoji tem seu próprio arquivo PNG. Esses arquivos de imagem são pronto para retina então eles ficam ótimos em todos os monitores.

Você também pode demonstrar esses emojis incluindo o arquivo CSS bruto em seu site. O arquivo faz referência a imagens auto-hospedadas no GitHub você não precisa hospedar nada localmente para começar.

Na página inicial do Emoji CSS, você encontrará todos os Classes de código de imagem junto com um exemplo de fragmento de demonstração. Depois de adicionar o arquivo Emoji CSS ao seu documento, basta adicionar um elemento com o .em classe, junto com qualquer classe relacionada ao ícone específico que você deseja mostrar.

Então, por exemplo, este código:

adicionará os 100 emojis diretamente ao conteúdo do seu site. Você tem bem mais de 200 emojis diferentes para escolher e o projeto é Código aberto então é disponível para atualizações.

O melhor de tudo é que a página inicial do Emoji CSS é super fácil de usar. Somente clique em um ícone e vais copiar automaticamente esse código-fonte na área de transferência para que você possa colá-la diretamente no seu HTML.

Eu serei o primeiro a admitir que nem todo site vai se beneficiar desta biblioteca Emoji, mas redes sociais e Websites compatíveis com comentários podem melhorar o engajamento dos usuários adicionando suporte a emojis. E com a biblioteca Emoji CSS, isso é praticamente um processo de duas etapas para emoji-up seu site.