How to use twemoji as your emoji font

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;

Tweemoji 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.



heck yes

1 Like

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


Not good, but still works:

<script src="" crossorigin="anonymous"></script><script> document.getElementsByTagName("body")[0].innerHTML=twemoji.parse(document.getElementsByTagName("body")[0].innerHTML) </script><style>img.emoji {height: 1.1em;width: 1.1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}</style>

I would not recommend doing this because the script tag is usually supposed to be loaded first and HTML goes from top to bottom, so the library could be loaded/cached earlier. Then, at the end, twemoji parses the body tag so no unsupported emoji’s are seen.

This could be used as a bookmarklet, with a little bit of modifications!


It would probably have to be something like this

huh, you can’t drag and drop into the browser from discourse:;charset=utf-8;bxze64,XQAAAAI8AgAAAAAAAAAeGgIj4VxIjCjosBuOvAtBOnX4FbgwxhmvC7YPKTF4DL6AbjmkxdYXTOUr/ORAzdhS8Ypp2ABnjwb39b8bKk8Po2AsFVCckNApQ6tiqf2ZqGBb6gS9D3Xs47ByG2mqA3Q3iiJISBuOa6fxtY8pxEmuCrfK6ZWengVdJ+E6rYymSvtf+mYUYU5YrCcTgPVY2/1LOguKUs5V8e7GQEqsYhBJpyZ562aLY0ScE83UKoqafO4ljztB+SpQKHV+xVT89I//Wlnm0/z+XUSn4QiujKwfo02CiWWPYZBdqKiU8CATeppjmf0+SnE+44bGIvOfpHNmCsykdPV0wqSw8Hus/dj6CEHTv2UWUlh2j48ULjUvQv6dePQfFoEm24y7C4fHgF99CWH/EEsxY6O95jRPDp+P9nON0te3Eo8G4DgZ2gQ9XUtvpyp9tPQFp3a+75dxJKKun9/gJ3eRL//xg9Vs

Try dragging and dropping the link in there ^

1 Like

I made a bookmarklet


Select and drag to bookmarks bar


aw heck yea!!

Now let us me use Twemoji everywhere I go

Not really as:

  • not everything is stored in the body tag
  • you have to have a body tag

But literally every site has a body tag…

but ok I guess

Not every site.


ok fine

Some HTML compressors will auctally strip out the body tag for some reason :confused:

aw heck no…

aw heck ya…

Wait, what? Having a body tag is standard HTML. In most browsers like Chrome and Firefox, they’ll automatically add it to the page.


I’ve seen many people put their site content in the head tag.

how do people do that?

I don’t even know. Like I don’t even know.


Mkay, that’s quite bad…

and the bookmarklet you made @mayank1234cmd is quite cool :smiley:

1 Like