They are often used within the dashboard. Practically - on each sub-page is available. It should be familiar with the existing options.
Sizes
There are versions available default, that is avatar, large avatar avatar-lg & small avatar avatar-sm
Examples
Status Icon with Label
Just add the class label <span class="label label-warning">3</span>
Examples
Mixed Status with Label
Just add the class label <span class="label label-warning">3</span> & <i class="avatar-status bg-danger avatar-status-bottom">
Examples
Status Top Icon
You can add as: Available avatar-status bg-success or Away bg-warning, Busy bg-danger etc.
Examples
Status Icon with Badge
Just add the class label <span class="badge">3</span>
Examples
Icon Avatar
Just add the class label <i class='avatar-content fa fa-user'>
Examples
Status Bottom Icon
Simply add the class avatar-status-bottom for example: <i class="avatar-status bg-success avatar-status-bottom">
Examples
Mixed Status with Badge
Just add the class label <span class="badge">3</span> & <i class="avatar-status bg-danger avatar-status-bottom">
Examples
Text Avatar
Just add the class label <i class='avatar-content fa fa-user'>
Examples