Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to use emojis in HTML and CSS.
This is a simple and quick tutorial. If you are looking for more such tutorials that will help you learn HTML and CSS with such small tips and tricks, you can check out this playlist here. This playlist consists of a bunch of quick tutorials to help you learn the little hacks to improve your HTML, CSS and Javascript skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day. Along with these tutorials, I even post multiple-choice questions based on HTML, CSS and Javascript.
How To Add Emoji In HTML:
We first learn how to insert emojis into HTML.
Before we start coding, let us look at the project folder structure. The project folder is called – ‘Add Emoji To HTML’. Inside this folder, we have just one file – index.html.
The most crucial step here is to specify the character encoding as – ‘UTF-8’. You do it by mentioning metadata in the head of the document.
Next, we have two methods two add emojis to HTML. In the first method, we simply copy and paste the emoji into the div.
In the next method, we copy and paste the Unicode of the emoji into the div. You can find the full list of emojis and their Unicode here. Now all you have to do is replace the ‘U+1’ with ‘&#x’ in the Unicode.
To scale up or scale down the emoji use font size.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character Encoding -->
<!-- This is important. This specifies the character encoding -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Use Emoji In HTML</title>
<style>
/* Just use font size to size up or down the emoji*/
div{
font-size: 120px;
}
</style>
</head>
<body>
<!-- Method 1-->
<!-- You can simply copy paste the emoji -->
<div>🫣</div>
<!-- Method 2-->
<!-- Copy and Paste the Unicode. Replace the 'U+1' to '&#x'-->
<div>🌸</div>
</body>
</html>
How To Add Emoji In CSS:
Next, we learn how to add emojis to CSS.
For this, we create a folder called – ‘Add Emoji In CSS’. Inside this folder, we have a file called – ‘index.html’. We write the CSS code in this file itself.
In the first method, we simply copy and paste the emoji into the content of the ‘before’ or ‘after’ pseudo-element.
In the second method, copy and paste the Unicode into the content of the ‘before’ or ‘after’ pseudo-element. Finally, replace ‘U+’ with ‘\0’*
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character Encoding -->
<!-- This is important. This specifies the character encoding-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Use Emoji In CSS</title>
<style>
/* Method 1
Simply copy and paste the emoji in to the content of the 'before' or 'after' pseudo element */
.emoji-1:before {
font-size: 100px;
content: "👵";
position: absolute;
}
/* Method 2
Copy and paste the unicode into the content of the 'before' or 'after' psueod element. Replace 'U+' with '\0'*/
.emoji-2:before {
font-size: 140px;
content: "\01F42C";
position: absolute;
top: 300px;
}
</style>
</head>
<body>
<div class="emoji-1"></div>
<div class="emoji-2"></div>
</body>
</html>
That’s all for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the ‘Download code ‘ button below. Also, if you have any queries, suggestions or feedback you can comment on them below.
Happy Coding!
