Badge
Badges are small status descriptors typically circular in shape. They can be used on UI elements like avatar, icons and text. Use the .badge class to create a badge.
Badge on Avatar
Avatar badges are used to indicate user status like online, offline or away.
<div class="avatar offline">
<img src="avatar.jpg" alt="" />
</div>
<div class="avatar online">
<img src="avatar.jpg" alt="" />
</div>
<div class="avatar away">
<img src="avatar.jpg" alt="" />
</div>
Badge on Icon
To add a badge on an icon, wrap the icon with .icon-badge and then add a sibling element with .badge class. You can add different colors to the badges with a color class like .green.
Note: To maintain the circular shape, badges on icons must contain a maximum of 3 characters.
<div class="icon-badge">
<i class="far fa-envelope"></i>
<span class="badge">99+</span>
</div>
<div class="icon-badge">
<i class="far fa-heart"></i>
<span class="badge green">10</span>
</div>
<div class="icon-badge">
<i class="fas fa-shopping-cart"></i>
<span class="badge blue">3</span>
</div>
Badge on Text
You can also add badge on text, With the same classes used in icon with badges.
Text with a badge
2<div class="icon-badge">
<p class="text-xlg">Text with a badge</p>
<span class="badge">2</span>
</div>
Badge Size
Alter the size of a badge with .lg class.
<div class="icon-badge">
<i class="far fa-heart"></i>
<span class="badge green">10</span>
</div>
<div class="icon-badge">
<i class="fas fa-shopping-cart"></i>
<span class="badge blue lg">3</span>
</div>