How to Add new Emojis?

Sngine Use Twemoji-Awesome some thing like FontAwesome but for emojis

http://ellekasai.github.io/twemoji-awesome/

That based on the Twitter Open Source Emojis or Twemojis

https://twemoji.twitter.com/

which is totally FREE and has thousands of emojis that you can use

Twemoji-Awesome not support all Twemojis but only support this list

https://www.webfx.com/tools/emoji-cheat-sheet/

And you can also preview them here

https://twitter.github.io/twemoji/preview.html

So you have 827 on this list you can use easily like this

From admin panel you will add new emoji then add the class name & pattern

For example the :love_letter: for pattern and love-letterfor class name

As you can see You must replace underscores with hyphens

OK what if you need to add more? that not included in the 827 emojis

You can add more YES

You can simply check this list that contain (2841 Emojis)

http://twitter.github.io/twemoji/2/test/preview-svg.html

Then simply choose the one you want to add then Right Click on your mouse and select “Inspect Element” (on Google Chrome) just to learn the SVG name of the Emoji like this

The name is “1f44d-1f3fb.svg ” then I will go to MAXCDN to get the full path of it

https://cdnjs.com/libraries/twemoji

Search “CTRL + F” and search for “1f44d-1f3fb.svg

Copy the full path and then go to Sngine admin panel -> Design

Enable Customization and add the following code like this

.twa-whiteguy {
background-image: url(https://cdnjs.cloudflare.com/ajax/libs/twemoji/11.3.0/2/svg/1f44d-1f3fb.svg);
}

whiteguy is totally can be anything you want and the URL is the URL that we got from previous step

The go to Emojis and add new one and we will use the name we selected before “whiteguy” for both pattern and class

And BOOOM that’s it

Happy Sngine 🙂