Avatar
Refer to below example to use Symbol for avatar image display:
<div class="symbol symbol-50px">
<img src="assets/media/avatars/300-6.jpg" alt=""/>
</div>
Background Image
Refer to below example to place avatar as background image:
<div class="symbol symbol-50px">
<div class="symbol-label" style="background-image:url('assets/media/avatars/300-12.jpg')"></div>
</div>
Ratio
Use
.symbol-2by3class to set avatar background image with 2 by 3 ratio:
<div class="symbol symbol-50px symbol-2by3">
<img src="assets/media/avatars/300-6.jpg" alt=""/>
</div>
Label
Set symbol label within
.symbol-labelelement and style it with text and background utility classes:A
L
C
T
X
S
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold bg-danger text-inverse-danger">L</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-danger">C</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold bg-primary text-inverse-primary">T</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-warning">X</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold bg-info text-inverse-info">S</div>
</div>
Badge
Add a badge element using
.badgecomponent inside a symbol element:A
3
A
3
A
3
A
3
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold">A</div>
<span class="symbol-badge badge badge-circle bg-danger start-100">3</span>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold">A</div>
<span class="symbol-badge badge badge-circle bg-success top-100 start-100">3</span>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold">A</div>
<span class="symbol-badge badge badge-circle bg-primary start-0">3</span>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold">A</div>
<span class="symbol-badge badge badge-circle bg-warning start-0 top-100">3</span>
</div>
Styles
Use
.symbol-circleand
.symbol-squareclasses to change a symbol element's style:A
A
A
<div class="symbol symbol-50px">
<div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px symbol-circle">
<div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>
<div class="symbol symbol-50px symbol-circle">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px symbol-square">
<div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>
<div class="symbol symbol-50px symbol-square">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
Sizes
Assign responsive-friendly size to a symbol element with shorthand classes. The classes are named using the format
.symbol-{size}for
xsand
.symbol-{breakpoint}-{size}for
sm,
md,
lg,
xl, and
xxl.Where
sizeis one of:
-
20px- for classes that set height and width to 20px -
25px- for classes that set height and width to 25px -
30px- for classes that set height and width to 30px -
35px- for classes that set height and width to 35px -
40px- for classes that set height and width to 40px -
45px- for classes that set height and width to 45px -
50px- for classes that set height and width to 50px -
55px- for classes that set height and width to 55px -
60px- for classes that set height and width to 60px -
65px- for classes that set height and width to 65px -
70px- for classes that set height and width to 70px -
75px- for classes that set height and width to 75px -
100px- for classes that set height and width to 100px -
125px- for classes that set height and width to 125px -
150px- for classes that set height and width to 150px -
160px- for classes that set height and width to 160px -
175px- for classes that set height and width to 175px -
200px- for classes that set height and width to 200px
A
A
A
A
A
A
<div class="symbol symbol-30px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-75px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-100px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-125px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-150px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
Group
Wrap symbols with
.symbol-groupclass to have a group with slighly overlapped symbols:
<div class="symbol-group symbol-hover">
<div class="symbol symbol-circle symbol-50px">
<img src="assets/media/avatars/300-6.jpg" alt=""/>
</div>
<div class="symbol symbol-circle symbol-50px">
<img src="assets/media/avatars/300-1.jpg" alt=""/>
</div>
<div class="symbol symbol-circle symbol-50px">
<img src="assets/media/avatars/300-2.jpg" alt=""/>
</div>
<div class="symbol symbol-circle symbol-50px">
<img src="assets/media/avatars/300-5.jpg" alt=""/>
</div>
<div class="symbol symbol-circle symbol-50px">
<img src="assets/media/avatars/300-20.jpg" alt=""/>
</div>
<div class="symbol symbol-circle symbol-50px">
<img src="assets/media/avatars/300-23.jpg" alt=""/>
</div>
</div>
2022©
Keenthemes
