Avatar

Create and group avatars of different sizes and shapes with a single component.
Avatar Sizes 
<div class="avatar avatar-xxl">
    <img src="assets/img/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>
​
<div class="avatar avatar-xl">
    <img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
</div>
​
<div class="avatar avatar-lg">
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
</div>
​
<div class="avatar">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
​
<div class="avatar avatar-sm">
    <img src="assets/img/users/user-5.jpg" alt="..." class="avatar-img rounded-circle">
</div>
​
<div class="avatar avatar-xs">
    <img src="assets/img/users/user-6.jpg" alt="..." class="avatar-img rounded-circle">
</div>
Avatar with text placeholders
<div class="avatar avatar-xxl">
    <span class="avatar-title rounded-circle ">AR</span>
</div>
​
<div class="avatar avatar-xl">
    <span class="avatar-title rounded-circle ">EQ</span>
</div>
​
<div class="avatar avatar-lg">
    <span class="avatar-title rounded-circle ">VV</span>
</div>
​
<div class="avatar">
    <span class="avatar-title rounded-circle ">SM</span>
</div>
​
<div class="avatar avatar-sm">
    <span class="avatar-title rounded-circle ">XS</span>
</div>
​
<div class="avatar avatar-xs">
    <span class="avatar-title rounded-circle ">SS</span>
</div>
Avatar Status
<div class="avatar avatar-online">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-away">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-dnd">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-offline">
    <img src="assets/img/users/user-4.jpg" alt="..." class="avatar-img rounded-circle">
</div>
Avatar Group
<div class="avatar-group">
    <div class="avatar ">
        <img src="assets/img/users/user-2.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>
​
    <div class="avatar ">
        <img src="assets/img/users/user-3.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>
​
    <div class="avatar">
        <img src="assets/img/users/user-4.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>
​
    <div class="avatar ">
        <img src="assets/img/users/user-5.jpg" alt="..."
             class="avatar-img rounded-circle">
    </div>
​
    <div class="avatar ">
        <span class="avatar-title rounded-circle">AB</span>
    </div>
</div>
Avatar Shape
<div class="avatar avatar-xl">
    <img src="assets/img/users/user-2.jpg" alt="..." class="avatar-img ">
</div>
​
<div class="avatar avatar-xl">
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded">
</div>
​
<div class="avatar avatar-xl">
    <img src="assets/img/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
</div>
Avatar as file picker in forms
You can avatar file picker, this comes handy when you want to create profile picture updating scenarios

Markup
<label class="avatar-input">
    <span class="avatar avatar-lg">
        <img src="assets/img/users/user-9.jpg" alt="..."
             class="avatar-img rounded-circle">
         <span class="avatar-input-icon rounded-circle">
        <i class="mdi mdi-upload mdi-24px"></i>
    </span>
    </span>
    <input type="file" class="avatar-file-picker" >
</label>
JS Code for picker
 function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
​
            reader.onload = function (e) {
                $(input).parents('.avatar-input').find('.avatar-img').attr('src', e.target.result);
            };
​
            reader.readAsDataURL(input.files[0]);
        }
    }
    $('.avatar-file-picker').on('change', function () {
         readFile(this);
    });
​
Please note file picker does not upload image on selection
Last modified 4yr ago