آواتار
<div >
<div >
<h5>Colors</h5>
<p >برای تغییر رنگ پس زمینه از کلاس <code>bg-*</code> استفاده کنید.
</p>
</div>
<div >
<div >
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
پ
</span>
<span >
آ د
</span>
</div>
</div>
</div>
آ ر
ت ا
<div >
<div >
<h5>Outline</h5>
<p >برای افزودن حاشیه از کلاس <code>text-outline-*</code> استفاده کنید.</p>
</div>
<div >
<div >
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
آ ر
</span>
<span >
ت ا
</span>
</div>
</div>
</div>
<div >
<div >
<h5>Images</h5>
</div>
<div >
<div >
<div >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="آواتار" >
</div>
<div >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/2.png" alt="آواتار" >
</div>
<div >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="آواتار" >
</div>
<div >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
</div>
<div >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="آواتار" >
</div>
<div >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
</div>
</div>
</div>
</div>
<div >
<div >
<h5>Light background</h5>
<p >برای پس زمینه روشن از کلاس <code>text-light-*</code> استفاده کنید.</p>
</div>
<div >
<div >
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
</div>
</div>
</div>
<div >
<div >
<h5>Light background</h5>
<p >برای پس زمینه روشن از کلاس <code>text-light-*</code> استفاده کنید.</p>
</div>
<div >
<div >
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
<span >
<i ></i>
</span>
</div>
</div>
</div>
3
<div >
<div >
<h5>شاخص ها و آیکن</h5>
<p >مثال شاخص ها و آیکن</p>
</div>
<div >
<div >
<span >
<i ></i>
<span
></span>
</span>
<span >
<i ></i>
<span
></span>
</span>
<span >
<i ></i>
<span
></span>
</span>
<span >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="آواتار" >
<span
></span>
</span>
<span >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
<span
>3</span>
</span>
<span >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
<span
><i
></i></span>
</span>
</div>
</div>
</div>
- آ
- س د
- ف ق ر
- 2+
-
-
-
- 10+
-
-
-
-
- 5+
<div >
<div >
<h5>گروه بندی همراه با تولتیپ</h5>
<p >گروه بندی کاربران همراه با تولتیپ</p>
</div>
<div >
<div >
<ul >
<li >
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="لادن">
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="مریم">
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
</li>
</ul>
<ul >
<li data-bs-toggle="tooltip"
data-bs-title="آتنا">
<i ></i>
</li>
<li data-bs-toggle="tooltip"
data-bs-title="کاوه">
<i ></i>
</li>
<li data-bs-toggle="tooltip"
data-bs-title="رادمهر">
<i ></i>
</li>
</ul>
<ul >
<li data-bs-toggle="tooltip"
data-bs-title="الهام">
آ
</li>
<li data-bs-toggle="tooltip"
data-bs-title="هادی">
س ی
</li>
<li data-bs-toggle="tooltip"
data-bs-title="هادی">
ر ف ق
</li>
<li data-bs-toggle="tooltip"
data-bs-title="2 مورد">
2+
</li>
</ul>
<ul >
<li
data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="آوا">
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="میکائیل">
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
</li>
<li data-bs-toggle="tooltip"
data-bs-title="10 مورد">
10+
</li>
</ul>
<ul >
<li
data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
<span
></span>
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
<span
></span>
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
<span
></span>
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/2.png" alt="آواتار" >
</li>
<li
data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
<span
></span>
<img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="آواتار" >
</li>
<li data-bs-toggle="tooltip"
data-bs-title="5 مورد ">
5+
</li>
</ul>
</div>
</div>
</div>