What emojis? What story can those mere doughnut-shaped icons give to my context? They are only meant to be used to make fun of someone over chat, (mostly by using 😅). No one tells a story using emojis, do they? Then what kind of weird-ass story would that be?

Phew! Let me tell you something, I was just kidding. 🤷‍♂️

😏 Why is it so important?

Have you ever heard the phrase, "A picture says a thousand words"? This can sound vague to you, but honestly, when you look at a picture instead of reading just mere words it makes more sense, right? Somehow, you get an idea of what the context is going to be about or what the person implies.

We have every rule of grammar and vastness of vocabulary to express our feelings with literature, but nothing quite compares to how much you can explain with just a round-shaped icon! 😏 See.

After all, it's not about what you speak but how you speak, that matters.

😱 Where did my emoji's go?

Ha! You have this question, now! It's pretty easy with your everyday phones or tablets to access them, coz its right beside your touch keyboard, but it might be a mystery in laptops or computers.

On Windows

Ah, you'll be amused if you didn't know earlier, its just a keyboard shortcut. 😅

First, get to the place you want to insert the emoji, then its the Win Key + ; (semicolon) or Win Key + . (full stop). A box with all your emojis opens up, start typing to match the emoji name.

On Mac

I'm not a mac user, so if it works let us know in the comments. 😛

So, in the place where you want to input the emoji, use the keyboard shortcut Command - Control - Spacebar to access emoji. It'll open up a box full of emojis.

On Linux

With the release of Ubuntu 18.04 LTS, you can use emoji by just right-clicking and select insert emoji or pressing Ctrl + . (full stop) Also, there are other ways for older versions, and all, if you want here is a StackExchange answer having all the ways.

💪 Gotcha! Now, where can I use them?

Almost everywhere I could say, but here are some everyday places where I use an emoji!

In the Web!

Before I delve into this, I want to specify there are two ways in which you can get an emoji to the web. And they are,

Through your Emoji Keyboard (or copying and pasting from emojipedia.com)
Through a Unicode Codepoint

Unicode is the mother of encoding and representing all the characters on earth, you've ever seen! And as Emoji is nothing but a character, you can simply use its encoding, if not the character itself.

Inside HTML

As you can see, we have used below the real Emoji (😍) from our keyboard in the first div whereas, in the second one we used it from a Unicode Codepoint. And you're right, writing codepoints sucks! But that's why we have an emoji keyboard, right!

Okay, let's see how to write the codepoint. If you don't have an emoji keyboard or some other situation you want to use the Unicode directly, you can see the full list of all the emojis from the official Emoji charts. Link to Full Emoji List.

Now, you can see the codepoint for our 😍 emoji is, U+1F60D which you got to copy and then replace the U+ with some escape characters which are &#x. And end the string with a semi-colon ;. Here we go. Our emoji is showing fine!

P.S: As all our emojis are coming under UTF-8 character encoding, so if your emoji isn't displayed somehow or you want to make things more robust, so you can add a meta tag with the charset. All you need to do is add, <meta charset="UTF-8"> to your <head> tag and you're all set!

Inside CSS

We can use it for many cool purposes, I'm going to show you two of them. Hold on! 😎

Pseudo Elements with Emojis

You can see how the emoji is added inside the content property of the pseudo-selectors in the CSS. As said, they can be put anywhere like normal characters.

Cursors with Emojis

I learned it recently and it feels so awesome! 😍 You might already be knowing the cursor property in CSS, that can take values like progress, pointer etc, and also you can give a custom URL. This allows you to customize whatever you want as a cursor, it can be a picture or even emoji! 🙈

So, how did I get all the gibberish written inside cursor: url()! You guessed it right, there's a site called emojicursor.app which generates the emoji URL for you! Gotcha? 🙌 You can just copy and paste it in your required element.

Also, there's a hard way which is also awesome, but that's beyond the scope of this post. I found a great post on CSS-Tricks though, you can follow how from there.

With JavaScript

As said you can use them alike characters wherever you want, either from its codepoint or by putting the icon. Well, here's one more example! 💁‍♂️

You can see in the JS, how we get the emoji from its codepoint. As said earlier, you can go to the Unicode emoji list, but the only catch is that replace U+ with 0x this time. And write it like this. String.fromCodePoint(0x1F4AA).

Your very own Favicon

To begin with, Favicons are those small icons you see beside the title of your webpage, in the tabs area. It can be anything you want, however, this is how you keep an emoji as a Favicon.

Go, visit Emojipedia
Search and find your favorite emoji
Right-click on your one and select Open image in new tab

Copy the URL from the new tab with the image
And paste it in your HTML in this manner (ofc, give your own href 😅)

    <link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/heart-with-arrow_1f498.png" />

🥳 Add emojis to your Git Commits

Ever wondered how the heck are we supposed to add emoji's to the git commits, like this?

This is one of the things I was very frightened about in the past, until I figured out it was so simple. So, the magic here is in Markdown. 💫

Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.

You can use Markdown in most places on Github, like Gists, Comments in Issues and Pull Requests or even in files with .md extension. So, your life is awesome now. Wait, is there any list of markdown form emojis? Absolutely.

This is a very concise guide to letting you know which emojis to add to your commit messages.

A snapshot from gitmoji.

And this is a gist all kinds of emoji's markdown.

Emojis Markdown

Last but not the least,

Custom Emoji's on Slack and Discord 🦜

Yaaaay! You can create a custom emoji and upload it to your channel by pressing Add Emoji from slack, and give it a name as you like. Guess what? There's a cool bunch of emoji's already on an awesome website called, Slackmojis. Discord has a similar feature too.

This is a comprehensive guide for adding custom emojis if you're stuck somehow.

For Slack

For Discord

You're just a click away from adding them to your channels and planning your next party! 👯‍♂️🎉

So, now? 🐒

Aha! Now it's your turn to mess around with emojis and use them everywhere you can, coz they are awesome. It makes your content stand out of the crowd, with that pinch of emotion, which is hard with plain text. And also at times, when you don't want a realllly serious statement to look too serious, don't forget to grab one emoji at the end! 😛

Where else have you used emojis in your workspace? 🤷‍♂️

I'm always up to something, on Twitter, @tulsiprasad22.
Let's grab a coffee, sometime! ☕

Blog

Tell more stories with Emojis 🐶🏠

Tulsi Prasad