-
2
سبد خرید
-
مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
- 4
-
15
-
آوا
مدیر
آواتارها
سایزها
اندازه آواتارها را با استفاده از کلاس .img-*(70/80/90/100) تعیین کنید.
<div class="avatars">
<div class="avatar"><img class="img-100 rounded-circle" src="./assets/images/avtar/3.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-90 rounded-circle" src="./assets/images/avtar/4.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-80 rounded-circle" src="./assets/images/avtar/7.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-70 rounded-circle" src="./assets/images/avtar/11.jpg" alt="avatar"></div>
</div>نمایش وضعیت
برای تعیین وضعیت، کلاس .status-*(online/offline/dnd) را اضافه کنید.
<div class="avatars">
<div class="avatar"><img class="img-100 rounded-circle" src="./assets/images/user/1.jpg" alt="avatar">
<div class="status status-online"></div>
</div>
<div class="avatar"><img class="img-90 rounded-circle" src="./assets/images/avtar/16.jpg" alt="avatar">
<div class="status status-dnd"></div>
</div>
<div class="avatar"><img class="img-80 rounded-circle" src="./assets/images/avtar/7.jpg" alt="avatar">
<div class="status status-offline"></div>
</div>
<div class="avatar"><img class="img-70 rounded-circle" src="./assets/images/avtar/11.jpg" alt="avatar">
<div class="status status-online"></div>
</div>
</div>اشکال
برای تعیین شکل آواتار، از کلاس .b-r-*(8/30/35/25) استفاده کنید.
<div class="avatars">
<div class="avatar"><img class="img-100 b-r-8" src="./assets/images/avtar/4.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-90 b-r-30" src="./assets/images/avtar/16.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-80 b-r-35" src="./assets/images/avtar/3.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-70 rounded-circle" src="./assets/images/avtar/11.jpg" alt="avatar"></div>
</div>نسبت
برای تعیین نسبت آواتار، از کلاسهای .ratio و img-*(50/70/80/90/100) استفاده کنید.
<div class="avatars">
<div class="avatar ratio"><img class="b-r-8 img-100" src="./assets/images/avtar/11.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-90" src="./assets/images/avtar/4.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-80" src="./assets/images/user/1.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-70" src="./assets/images/avtar/16.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-50" src="./assets/images/avtar/7.jpg" alt="avatar"></div>
</div>گروهبندی
برای ایجاد گروهی از آواتارها، از کلاسهای .img-*(40/50/60/80/100) و .b-r-*(8/30/35) استفاده کنید.
<div class="avatars">
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block"><img class="img-100 b-r-8" src="./assets/images/avtar/4.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-80" src="./assets/images/avtar/16.jpg" alt="avatar"></li>
<li class="d-inline-block"></li><img class="img-50 b-r-35" src="./assets/images/avtar/3.jpg" alt="avatar">
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block"><img class="img-60 rounded-circle" src="./assets/images/avtar/16.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="b-r-8 img-80" src="./assets/images/user/1.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-60 rounded-circle" src="./assets/images/avtar/16.jpg" alt="avatar"></li>
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block"><img class="img-40 rounded-circle" src="./assets/images/user/3.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-40 rounded-circle" src="./assets/images/user/5.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-40 rounded-circle" src="./assets/images/user/1.jpg" alt="avatar"></li>
<ul>
</div>آواتار با حرف اول
برای آواتارها از حرف اول نام استفاده کنید.
A
D
M
I
R
O
<div class="avatars">
<div class="avatar-intial img-80 bg-light-primary"><span class="fs-1">A</span></div>
<div class="avatar-intial img-70 bg-light-secondary"><span class="fs-2">D</span></div>
<div class="avatar-intial img-60 bg-light-danger"><span class="fs-3">M</span></div>
<div class="avatar-intial img-50 bg-light-primary"><span class="fs-4">I</span></div>
<div class="avatar-intial img-40 bg-light-secondary"><span class="fs-5">R</span></div>
<div class="avatar-intial img-30 bg-light-danger"><span class="fs-6">O</span></div>آواتار با پینگ
برای ایجاد انیمیشن پینگ از کلاس .ping استفاده کنید.
<div class="avatars">
<div class="avatar"><img class="img-80 rounded-circle" src="./assets/images/avtar/11.jpg" alt="avatar">
<div class="ping status-offline status"> </div>
</div>
<div class="avatar"> <img class="img-70 rounded-circle" src="./assets/images/avtar/4.jpg" alt="avatar">
<div class="ping status-online status"></div>
</div>
<div class="avatar"><img class="img-60 rounded-circle" src="./assets/images/user/1.jpg" alt="avatar">
<div class="ping status-dnd status"> </div>
</div>
<div class="avatar"><img class="img-50 rounded-circle" src="./assets/images/avtar/3.jpg" alt="avatar">
<div class="ping status-offline status"></div>پروفایل آواتار
از آیکونها و تصاویر به عنوان پروفایل آواتار استفاده کنید.
<!-- You can use status-* Use icon and images as avatars profile. -->
<div class="avatars">
<div class="user-img"><img src="./assets/images/profile.png" alt="user">
<div class="setting-icon"> <i class="iconly-Setting icli"> </i></div>
</div>
<div class="avatar-intial img-60 bg-light-primary avatar-profile"><img src="./assets/images/users/6.png" alt="users"></div>
</div>
</div>