/*Badge on avatar*/

<div class="relative">
	<div class="avatar avatar-lg">
		<img src="https://picsum.photos/id/237/200/300.jpg" alt="avatar" 
		class="responsive-img rounded-img avatar-lg" />
    	</div>
    	<span class="status-badge status-online round-badge"></span>
</div>

/*Badge with number*/

<a class="relative">
  <span><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></span>
  <span class="status-badge badge-wth-number round-badge">4</span>
</a>