Adding Emojis to Your Website with Twemoji Made Easy

Daniel Šebesta — Sat, 08 Apr 2023 14:07:28 +0000

Hey! Today I'd like to tell you about Twemoji, a great library that allows you to add emoji to your website using SVG images.

Adding Twemoji to your website is easy! Just copy and paste a few lines of code into the HTML file.

      <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
      <script>
         window.onload = function() {    
             twemoji.parse(document.body, 
                     {folder: 'svg', ext: '.svg'}
             );

         }

      </script>

And the following CSS to style the emojis:

img.emoji {
   display: inline !important;
   border: none !important;
   box-shadow: none !important;
   height: 1em !important;
   width: 1em !important;
   margin: 0 .07em !important;
   vertical-align: -0.1em !important;
   background: none !important;
   padding: 0 !important;
   pointer-events: none
   }

If you're planning to include Twemoji on your website, it's important to understand that it's best for small sites with low traffic. It may not be the best choice for large websites with a lot of emojis.

The problem is that this script refreshes all emoji every time you refresh the page. This can cause your site to not appear at its best because system emoji are still loading before Twemoji. If you don't have a lot of emoji and don't update them regularly, it's better to use static emoji that aren't replaced every time you refresh the page.
Overall, Twemoji is great for any site, but the way you do it is up to you and each way may not be ideal.

That's it, if you have any questions, ask in the comments. This is also my first post on dev.to, so I apologize for any mistakes.

DEV Community: Daniel Šebesta

Adding Emojis to Your Website with Twemoji Made Easy