Tl;dr some css to make inlined img tags look like custom emojis

The problem

You want to copy messages from slack into an html page, including the emojis. If your slack messages only contain standard emojis, this is easy, but if you want to include messages with custom emojis, this is slightly less easy.

Why?

Maybe you want to preserve slack messages in some sort of ‘hall of fame’ website. It’s a weird thing to want to do, but at least one person has found themselves in that situation (it’s me, I’m the person).

Ok I’ll bite, give me the codez

<style>
   .emoji {
      
       /* use em for sizing so that your emoji scales with your font size ✨ */
       height: 1.3em;
 
       /* this aligns the emoji vertically in such a way that it looks pretty much like it looks on slack ✨ */
       vertical-align: text-bottom;
 
   }
</style>
 
<p>
   hey check it out
   <img class="emoji" src="https://emoji-town.org/wizard.gif" />
   it feels just like slack
   <img class="emoji" src="https://emoji-town.org/slack.png" />
</p>

hey check it out it feels just like slack

Cool I guess

That’s all for now. If you’re hungry for more, have a browse of the archive. See you next year!