Emojis were created by Japanese artist Shigetak Kurita and it first appeared in the early 90's on Japanese mobile phones. In the past few years, emojis have become a hallmark of the way people communicate.
Emojis are text-characters like alphanumeric characters. On smart phones, you can easily switch the keyboard layout to insert emojis but computer keyboards don't have dedicated keys for emojis.
In this short article, you'll learn how to add emojis to your HTML code without stress.
The first step is to ensure that you have the code below in your HTML header.
<meta charset= "UTF-8">
This is important because it enables emojis to display consistently on across different browsers. UTF-8 covers almost all the symbols and characters in the world.
The next step is to find the unicode for the emoji you want to use. You can check out this website, they've got loads of emojis and their unicode. The unicode is inserted in a
html tag or a html tag. The tag will create a new line while the tag will continue in the same line. Let's say I want to insert the "smiling face with smiling eyes emoji" which is;
😊 and the unicode is U+1F60A.
To insert the emoji with a hexadecimal code, you'll have to replace the "U" with "&#X" then add "a;" to the end of the unicode.
Your code should look like this: My result will be: This is my best emoji 😊 Another thing to note is that we can write the unicode as a decimal code. The decimal code can be used as an escape string.
The difference between the decimal code and the hexadecimal code is that we can remove the "x" and ofcourse the decimal code is numbers only. Here's an example of a winking face emoji . The result will be:
I'm winking 😉 Writing it in the decimal code will also work like this will give the same result. We can also copy and past emojis. Not all emojis have a single code points so the decimal and hexadecimal code will not work for all cases. This requires us using the copy and paste method.
in this method, all you have to do is to copy and paste the emojis I'm the middle of the tag. Here's an example. You might ask, "where do I copy emojis from?"
Well, there're many sites that allows you copy emojis and do whatever you want to with them. Here's a link to one. Search the name of the emoji then click copy to clip board. Once you've copied it, you can place it in your html. All text editors like Notepad, Visual Studio Code, TextEdit and so on supports the use of emojis. In this article, we discovered the different ways to insert emojis in html, but the best way is to copy and paste using a third party-website.
Text editors like Notepad displays the emojis black and white colour ( although they appear nicely when displayed in the browser) which may distract, then you can use the decimal or hexadecimal code for the supported emoji. <!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> My first emoji </title>
</head>
<body>
<p> This is my best emoji 😊</p>
</body>
</html>
<p> I'm winking<span>😉</span></p>
<p> I'm winking<span>😉</span></p>
<p>This is a winking emoji <span>😉</span> symbol.</p>
Conclusion