Badge

Badges can be used to display a notification count or status information that suits our needs.

Below is an example for badge on Icons.

5 5 5 5

    
          <span class="icon">
                <span><i class="fas fa-home"></i></span>
                <span class="icon-badge">5</span>
              </span>
              <span class="icon">
                <span><i class="fas fa-bell"></i></span>
                <span class="icon-badge">5</span>
              </span>
              <span class="icon">
                <span><i class="fas fa-envelope"></i></span>
                <span class="icon-badge">5</span>
              </span>
              <span class="icon">
                <span><i class="fas fa-shopping-cart"></i></span>
                <span class="icon-badge">5</span>
              </span>

Below is as example for badge on Avatars.

    
          <div class="avatar">
            <span class='avatar__badge'>
            <img src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="person" class='avatar-vlarge circle'>
            
            <span class='avatar-badge'>21</span>

            </span>
            
            <span class="avatar__badge">
               <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="person" class="avatar-large circle">
              <span class='avatar-badge'>21</span>
            </span>

            <span class="avatar__badge">
              <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" alt="person" class="avatar-medium circle">
              <span class='avatar-badge'>21</span>
            </span>
        </div>