Twemojicons — Twitter’s Emojis Like FontAwesome

FontAwesome is a favorite add-on for web designing that I’ve used for a long time now. The idea of integrating vector graphics into the design was amazing. The only disappointment was that it could not be multi-color as it was a font.

Long before FontAwesome was discovered by me, I would edit a font-face and replace the ` character with a company log. This font would then be used as the font for the website such that I could use the ` character along with the name for Logo.

Emojis are also an interesting ‘technology’ that has made expressions more expressible. Especially for me who would always take the wrong tone out of a string of characters.

Working on my GUI website, I had to use emoji images whenever I needed them. Back then I wished these emojis were implementable like FontAwesome. But I wasn’t aware of any such tech.

Browsing the web, I come across the fact that Twemojis, the emoji set used on Twitter, are open source and I could use them to implement emojis like FontAwesome. And there it was! the Twemoji github page already listed a version created by Elle Kasai that worked just like FontAwesome. She called it Twemoji Awesome. Elle had used the same system as FontAwesome replaing the fa with twa and using Emoji Cheat Sheet names to implement them. However the project was discontinued and there were a lot of things missing.

That’s when I decided to make Twemojicons. But there was no place where I could find the descriptive or “label-able” name for all the emojis. That’s when I landed at the mother of all Emoji info sites: Unicode.org. A 64MB web page that contained all the emoji unicode code, corresponding emojis on various platforms and their description and names.

Thanks to regexp search magic on sublime text, I managed to extract the emoji codes and names from this page and remove all other unnecessary HTML codes. A little bit of PHP-JSON coding and I have a css file generated classes for each of the emojis. Because I was not going to write 2.4k+ css class declarations on my own.

So after a little programming with PHP, about an hour of head-butting against the wall thanks to the missing emoji names and problems, implementation of size and animation declarations and a little finishing touch, the code was ready.

After all this mess, I did what I do best and created a simple web page to preview the project and as a display page for interested designers to use it. I used the same php file and modified it to declare the twemojion previews in html page.

The entire project went on GitHub with a web page on my github space. And yes, the above emoji was implemented using Twemojicons. So it works!

If you simply want to implement the basic emojis for a website, I’d still suggest Elle’sTwemoji Awesome . That’s way more simpler. But if you want the full package, then head over to TwemojIcons, with a large number of emojis to choose from and a few added features like FontAwesome.

Next Stop.. Noto Emojis ;) <- If only medium allowed me to add code to the post, this could be a twemojicon.

Check out Twemojicons Here

The complete story was originally posted on my blog

Like what you read? Give Atul Bhat a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.