سیمبل
مؤلفه
.symbol دارای گزینه های مختلفی برای تهیه ظرف چند منظوره برای متن ، نماد و تصویر است.
نمونه پایه
پایه ای عناصر نمادی با تصویر.
<div class="symbol-list d-flex flex-wrap">
<div class="symbol mr-3">
<img alt="Pic" src="users/300_25.jpg"/>
</div>
<div class="symbol mr-3">
<img alt="Pic" src="users/300_21.jpg"/>
</div>
<div class="symbol mr-3">
<img alt="Pic" src="users/300_22.jpg"/>
</div>
<div class="symbol mr-3">
<img alt="Pic" src="users/300_23.jpg"/>
</div>
<div class="symbol mr-3">
<img alt="Pic" src="users/300_18.jpg"/>
</div>
<div class="symbol mr-3">
<img alt="Pic" src="users/300_17.jpg"/>
</div>
<div class="symbol">
<img alt="Pic" src="users/300_24.jpg"/>
</div>
</div>
پایه ای عناصر نماد با برچسب متن.
A
CD
MR
A
BD
A.A
T.J
<div class="symbol-list d-flex flex-wrap">
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">A</span>
</div>
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">CD</span>
</div>
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">MR</span>
</div>
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">A</span>
</div>
<div class="symbol">
<span class="symbol-label font-size-h5">BD</span>
</div>
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">A.A</span>
</div>
<div class="symbol">
<span class="symbol-label font-size-h5">T.J</span>
</div>
</div>
پایه ای عناصر نمادی با آیکون های فونت.
<div class="symbol-list d-flex flex-wrap">
<div class="symbol mr-3">
<span class="symbol-label"><i class="flaticon2-warning icon-lg"></i></span>
</div>
<div class="symbol mr-3">
<span class="symbol-label"><i class="flaticon2-tag" icon-lg></i></span>
</div>
<div class="symbol mr-3">
<span class="symbol-label"><i class="flaticon2-bell-5 icon-lg"></i></span>
</div>
<div class="symbol mr-3">
<span class="symbol-label"><i class="flaticon2-user-1 icon-lg"></i></span>
</div>
<div class="symbol mr-3">
<span class="symbol-label"><i class="flaticon2-drop icon-lg"></i></span>
</div>
<div class="symbol mr-3">
<span class="symbol-label"><i class="flaticon2-hangouts-logo icon-lg"></i></span>
</div>
<div class="symbol">
<span class="symbol-label"><i class="flaticon2-user-outline-symbol icon-lg"></i></span>
</div>
</div>
اندازه های مختلف
استفاده از .symbol-{size}
مقادیر پذیرفته شده size عبارتند از: کد 20 ، 25 ، 30 ، 35 ، 40 ، 45 ، 50 ، 55 ، 60 ، 65 ، 70 ، 75 ، 80 ، 85 ، 90 ، 95 ، 100 ، 100 ، 120 ، 130 ، 140 ، 150 .
<div class="d-flex align-items-center">
<div class="symbol symbol-20 mr-3">
<img alt="Pic" src="media/assets/users/300_18.jpg"/>
</div>
<div class="symbol symbol-25 mr-3">
<img alt="Pic" src="media/assets/users/300_19.jpg"/>
</div>
<div class="symbol symbol-50 mr-3">
<img alt="Pic" src="media/assets/users/300_20.jpg"/>
</div>
<div class="symbol symbol-70 mr-3">
<img alt="Pic" src="media/assets/users/300_21.jpg"/>
</div>
<div class="symbol symbol-90 mr-3">
<img alt="Pic" src="media/assets/users/300_22.jpg"/>
</div>
<div class="symbol symbol-100 mr-3">
<img alt="Pic" src="media/assets/users/300_23.jpg"/>
</div>
<div class="symbol symbol-120 mr-3">
<img alt="Pic" src="media/assets/users/300_24.jpg"/>
</div>
<div class="symbol symbol-150 mr-3">
<img alt="Pic" src="media/assets/users/300_25.jpg"/>
</div>
</div>
A
B
C
D
E
F
G
H
L
G
<div class="d-flex align-items-center">
<div class="symbol symbol-30 mr-3">
<span class="symbol-label font-size-h6">A</span>
</div>
<div class="symbol symbol-35 mr-3">
<span class="symbol-label font-size-h6">B</span>
</div>
<div class="symbol symbol-40 mr-3">
<span class="symbol-label font-size-h6">C</span>
</div>
<div class="symbol symbol-45 mr-3">
<span class="symbol-label font-size-h5">D</span>
</div>
<div class="symbol symbol-50 mr-3">
<span class="symbol-label font-size-h5">E</span>
</div>
<div class="symbol symbol-55 mr-3">
<span class="symbol-label font-size-h5">F</span>
</div>
<div class="symbol symbol-60 mr-3">
<span class="symbol-label font-size-h5">G</span>
</div>
<div class="symbol symbol-65 mr-3">
<span class="symbol-label font-size-h4">H</span>
</div>
<div class="symbol symbol-70 mr-3">
<span class="symbol-label font-size-h4">L</span>
</div>
<div class="symbol symbol-75">
<span class="symbol-label font-size-h4">G</span>
</div>
</div>
ریسپانسیو
استفاده از .symbol با .symbol-{sm|md|lg|xl|xxl}-{size}.
<div class="symbol-list d-flex flex-wrap">
<div class="symbol symbol-20 symbol-lg-30 symbol-circle mr-3">
<img alt="Pic" src="media/assets/users/300_20.jpg"/>
</div>
<div class="symbol symbol-30 symbol-lg-40 symbol-circle mr-3">
<img alt="Pic" src="media/assets/users/300_21.jpg"/>
</div>
<div class="symbol symbol-40 symbol-lg-50 symbol-circle mr-3">
<img alt="Pic" src="media/assets/users/300_22.jpg"/>
</div>
<div class="symbol symbol-40 symbol-lg-50 symbol-circle mr-3">
<img alt="Pic" src="media/assets/users/300_23.jpg"/>
</div>
<div class="symbol symbol-50 symbol-lg-60 symbol-circle">
<img alt="Pic" src="media/assets/users/300_18.jpg"/>
</div>
<div class="symbol symbol-50 symbol-lg-60 symbol-circle">
<img alt="Pic" src="media/assets/users/300_11.jpg"/>
</div>
</div>
استایل گرد
Use .symbol with .symbol-circle to have استایل گرد symbol elements.
A
D
F
<div class="symbol-list d-flex flex-wrap">
<div class="symbol symbol-circle mr-3">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_25.jpg"/>
</div>
<div class="symbol symbol-circle mr-3">
<span class="symbol-label font-size-h5">A</span>
</div>
<div class="symbol symbol-circle mr-3">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_22.jpg"/>
</div>
<div class="symbol symbol-circle mr-3">
<span class="symbol-label font-size-h5">D</span>
</div>
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_18.jpg"/>
</div>
<div class="symbol symbol-circle mr-3">
<span class="symbol-label font-size-h5">F</span>
</div>
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_10.jpg"/>
</div>
</div>
سیمبل بادج
استفاده از .symbol با .symbol-badge.
<div class="symbol-list d-flex flex-wrap">
<div class="symbol symbol-40 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/users/300_20.jpg')"></div>
<i class="symbol-badge bg-danger"></i>
</div>
<div class="symbol symbol-40 symbol-circle mr-3">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_20.jpg"/>
<i class="symbol-badge bg-danger"></i>
</div>
<div class="symbol symbol-60 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/users/300_21.jpg')"></div>
<i class="symbol-badge symbol-badge-bottom bg-success"></i>
</div>
<div class="symbol symbol-circle symbol-60 mr-3">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_21.jpg"/>
<i class="symbol-badge symbol-badge-bottom bg-success"></i>
</div>
<div class="symbol symbol-75 mr-3 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/users/300_22.jpg')"></div>
<i class="symbol-badge bg-primary"></i>
</div>
<div class="symbol symbol-circle symbol-75 mr-3">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_22.jpg"/>
<i class="symbol-badge bg-primary"></i>
</div>
</div>
بک گراند با عکس
استفاده از کلاس .symbol با .symbol-fixed.
<div class="symbol-list d-flex flex-wrap">
<div class="symbol symbol-30 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-35 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-40 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-45 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-50 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-55 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-60 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-65 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
<div class="symbol symbol-70 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-1.jpg')"></div>
</div>
</div>
استفاده از .symbol با .symbol-2by3 برای داشتن تصویر پس زمینه با 2X4
<div class="symbol-list d-flex flex-wrap">
<div class="symbol symbol-40 symbol-2by3 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-6.jpg')"></div>
</div>
<div class="symbol symbol-50 symbol-2by3 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-6.jpg')"></div>
</div>
<div class="symbol symbol-60 symbol-2by3 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-6.jpg')"></div>
</div>
<div class="symbol symbol-70 symbol-2by3 mr-3">
<div class="symbol-label" style="background-image: url('assets/media/stock-600x400/img-6.jpg')"></div>
</div>
</div>
لیبل رنگی
استفاده .symbol با .symbol-{color}.
A
S
B
S
L
X
W
<div class="symbol-list d-flex flex-wrap">
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">A</span>
</div>
<div class="symbol symbol-success mr-3">
<span class="symbol-label font-size-h5">S</span>
</div>
<div class="symbol symbol-primary mr-3">
<span class="symbol-label font-size-h5">B</span>
</div>
<div class="symbol symbol-danger mr-3">
<span class="symbol-label font-size-h5">S</span>
</div>
<div class="symbol symbol-info mr-3">
<span class="symbol-label font-size-h5">L</span>
</div>
<div class="symbol symbol-warning mr-3">
<span class="symbol-label font-size-h5">X</span>
</div>
<div class="symbol symbol-dark mr-3">
<span class="symbol-label font-size-h5">W</span>
</div>
</div>
استفاده از .symbol با .symbol-light-{color}.
A
S
B
S
L
X
W
<div class="symbol-list d-flex flex-wrap">
<div class="symbol mr-3">
<span class="symbol-label font-size-h5">A</span>
</div>
<div class="symbol symbol-light-success mr-3">
<span class="symbol-label font-size-h5">S</span>
</div>
<div class="symbol symbol-light-primary mr-3">
<span class="symbol-label font-size-h5">B</span>
</div>
<div class="symbol symbol-light-danger mr-3">
<span class="symbol-label font-size-h5">S</span>
</div>
<div class="symbol symbol-light-info mr-3">
<span class="symbol-label font-size-h5">L</span>
</div>
<div class="symbol symbol-light-warning mr-3">
<span class="symbol-label font-size-h5">X</span>
</div>
<div class="symbol symbol-light-dark mr-3">
<span class="symbol-label font-size-h5">W</span>
</div>
</div>
سیمبل گروه
از .symbol در داخل .symbol-گروه و <کد> و.
10+
<div class="symbol-group symbol-hover">
<div class="symbol">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_25.jpg"/>
</div>
<div class="symbol">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_21.jpg"/>
</div>
<div class="symbol">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_22.jpg"/>
</div>
<div class="symbol">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_23.jpg"/>
</div>
<div class="symbol">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_18.jpg"/>
</div>
<div class="symbol symbol-light-primary">
<span class="symbol-label font-weight-bold">10+</code>
</div>
</div>
5+
<div class="symbol-group symbol-hover">
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_25.jpg"/>
</div>
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_21.jpg"/>
</div>
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_22.jpg"/>
</div>
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_23.jpg"/>
</div>
<div class="symbol symbol-circle">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_18.jpg"/>
</div>
<div class="symbol symbol-circle symbol-light-danger">
<span class="symbol-label font-weight-bold">5+</span>
</div>
</div>
پیشرفت Usage
Use .symbol with other بوت استرپ elements to have any kind of UI elements.
<div class="dropdown dropdown-inline" data-toggle="tooltip" title="پروفایل" data-placement="top">
<a href="#" class="d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text-muted font-weight-bold mr-1">سلام,</span>
<span class="text-dark-75 font-weight-bold">محسن</span>
<span class="symbol symbol-circle symbol-success symbol-30 ml-2">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_25.jpg"/>
</span>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
<div class="dropdown dropdown-inline" data-toggle="tooltip" title="پروفایل" data-placement="top">
<a href="#" class="d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex flex-column text-right">
<span class="text-muted font-weight-bold">سلام</span>
<span class="text-dark-75 font-weight-bold">Tony</span>
</div>
<div class="symbol symbol-success ml-2">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_24.jpg"/>
</div>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
<div class="dropdown dropdown-inline" data-toggle="tooltip" title="پروفایل" data-placement="top">
<a href="#" class="d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="symbol symbol-success mr-2">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_24.jpg"/>
</div>
<div class="d-flex flex-column text-left">
<span class="text-muted font-weight-bold">سلام</span>
<span class="text-dark-75 font-weight-bold">Tony</span>
</div>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
<div class="dropdown dropdown-inline" data-toggle="tooltip" title="پروفایل" data-placement="top">
<a href="#" class="d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex flex-column text-right">
<span class="text-muted font-weight-bold"> Patty</span>
<span class="text-success font-weight-bold">Nina</span>
</div>
<div class="symbol symbol-circle symbol-success ml-2">
<span class="symbol-label">N</span>
</div>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
<div class="dropdown dropdown-inline" data-toggle="tooltip" title="پروفایل" data-placement="top">
<a href="#" class="d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex flex-column text-right">
<span class="text-muted font-weight-bold">مدیر پروژه</span>
<span class="font-weight-bold">نوید استون</span>
</div>
<div class="symbol symbol-circle symbol-50 mr-3">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_21.jpg"/>
<i class="symbol-badge bg-success"></i>
</div>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
