Emoji using HTML

0

Emojis are commonly used in todays computer-based communication. We often find an emoji font face pre-installed on many devices which is necessary for the rendering of the emoji symbol. In the following EXAMPLE I will try to discuss some key moments that enabled emojis to circulate through our network and society.if you want to display emoji in your website, you can use the HTML entity.

<!doctype html>
<title>Emoji</title>
<style>
.media {
display: flex;
align-items: flex-start;
background: #F6F3EB;
padding: 1em;
border-radius: 3px;
max-width: 500px;
}
.media-object {
margin-right: .4em;
font-size: 4em;
}
.media-body {
flex: 1;
}
.media-heading {
margin: 0 0 .5em;
}
</style>
<h2>Face Emoji</h2>
<div class="media">
<div class="media-object">&#x1F60E;</div>
<div class="media-object">&#x1F602;</div>
<div class="media-object">&#x1F60D;</div>
<div class="media-object">&#x1F631;</div>
<div class="media-object">&#x1F60B;</div>
<div class="media-object">&#x1F637;</div>
</div>
<h2>Animal-Bird Emoji</h2>
<div class="media">
<div class="media-object">&#x1F40E; </div>
<div class="media-object">&#x1F413;</div>
<div class="media-object">&#x1F409;</div>
<div class="media-object">&#x1F426;</div>
<div class="media-object">&#x1F435;</div>
<div class="media-object">&#x1F40C;</div>
</div>
<h2>Flower Emoji</h2>
<div class="media">
<div class="media-object">&#x1F339; </div>
<div class="media-object">&#x1F332; </div>
<div class="media-object">&#x1F341;</div>
<div class="media-object">&#x1F490;</div>
<div class="media-object">&#x1F33A;</div>
<div class="media-object">&#x1F331;</div>
</div>