Avatar

An avatar is an icon or figure representing a person in a profile section or chat screens etc.
Avatars are available in 4 sizes xs sm md and lg.

Examples

Image Avatars

avatar-img
avatar-img
avatar-img
avatar-img 
           
<div class="avatar avatar-lg mr-3">
    <img
      src="/css/images/img_avatar.png"
      alt="avatar-img"
      class="img-round img-responsive"
    />
  </div>
  <div class="avatar avatar-md mr-3">
    <img
      src="/css/images/img_avatar.png"
      alt="avatar-img"
      class="img-round img-responsive"
    />
  </div>
  <div class="avatar avatar-sm mr-3">
    <img
      src="/css/images/img_avatar.png"
      alt="avatar-img"
      class="img-round img-responsive"
    />
  </div>
  <div class="avatar avatar-xs">
    <img
      src="/css/images/img_avatar.png"
      alt="avatar-img"
      class="img-round img-responsive"
    />
  </div>

Text Avatars

AM
AM
AM
AM 
           
<div class="avatar avatar-lg avatar-text bg-cyan-700 text-white mr-3">AM</div>
<div class="avatar avatar-md avatar-text bg-yellow-500 text-white mr-3">AM</div>
<div class="avatar avatar-sm avatar-text bg-pink-500 text-white mr-3">AM</div>
<div class="avatar avatar-xs avatar-text bg-green-500 text-white">AM</div>
Alert Badge