How to use twemoji as your emoji font

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

<!DOCTYPE html>
<head>
+ <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
</head>
...

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

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

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.

Demo: https://awesomenotebook.glitch.me/posts/2020-11-4-twemoji-support-test/

5 Likes

heck yes

1 Like

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

6 Likes

Not good, but still works:

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" 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!

2 Likes

It would probably have to be something like this
test

huh, you can’t drag and drop into the browser from discourse:

https://itty.bitty.site/#/data:text/html;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

javascript:(function()%7Bfunction%20callback()%7B(function(%24)%7Bvar%20jQuery%3D%24%3B%24(document.body).append('%3Cscript%20src%3D%22https%3A%2F%2Ftwemoji.maxcdn.com%2Fv%2Flatest%2Ftwemoji.min.js%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%3Cscript%3E%20document.getElementsByTagName(%22body%22)%5B0%5D.innerHTML%3Dtwemoji.parse(document.getElementsByTagName(%22body%22)%5B0%5D.innerHTML)%20%3C%2Fscript%3E%3Cstyle%3Eimg.emoji%20%7Bheight%3A%201.1em%3Bwidth%3A%201.1em%3Bmargin%3A%200%20.05em%200%20.1em%3Bvertical-align%3A%20-0.1em%3B%7D%3C%2Fstyle%3E')%7D)(jQuery.noConflict(true))%7Dvar%20s%3Ddocument.createElement(%22script%22)%3Bs.src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3Bif(s.addEventListener)%7Bs.addEventListener(%22load%22%2Ccallback%2Cfalse)%7Delse%20if(s.readyState)%7Bs.onreadystatechange%3Dcallback%7Ddocument.body.appendChild(s)%3B%7D)()

Select and drag to bookmarks bar

4 Likes

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.

:cold_sweat:

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.

2 Likes

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.

2 Likes

Mkay, that’s quite bad…

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

1 Like