Skip to content

Instantly share code, notes, and snippets.

Created November 6, 2020 20:29
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
How to use Twemoji in your site.

Step 1: Add the Twemoji library to your <head> tag.

<!DOCTYPE html>
+ <script src="" crossorigin="anonymous"></script>

Step 2: Add the parser script after the closing <body> tag.

+ <script>
+ document.getElementsByTagName("body")[0].innerHTML=twemoji.parse(document.getElementsByTagName("body")[0].innerHTML)
+ </script>

Step 3: Adjust some CSS to fix the large emoji issue. Adjust as needed.

img.emoji {
   height: 1.1em;
   width: 1.1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;

Twemoji is now installed on your site! Enjoy!

Note: Emoji's will only be parsed in the <body> tag so it does not mess up stuff like metatags.


Noobs looking at this, you don’t need to include the plus signs. - CarlyRaeJepsenStan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment