Ugage
Use Bootstrap Icons with a spesific class as explained below:
<i class="icon-drone fs-2x"></i>
<i class="icon-trailer fs-2x"></i>
<i class="icon-chat fs-2x"></i>
<i class="icon-location fs-2x"></i>
<i class="icon-mail fs-2x "></i>
<i class="icon-settings fs-2x"></i>
<i class="icon-view fs-2x"></i>
<i class="icon-user-profile fs-2x"></i>
Icon Colors
The inline icons can be colored using
.text-{color}class that defined with
$theme-text-colorsvariable in
sass/_variables.scss:white
primary
secondary
light
success
info
warning
danger
dark
muted
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
<i class="icon-drone text-white"></i>
<i class="icon-drone text-primary"></i>
<i class="icon-drone text-secondary"></i>
<i class="icon-drone text-light"></i>
<i class="icon-drone text-success"></i>
<i class="icon-drone text-info"></i>
<i class="icon-drone text-warning"></i>
<i class="icon-drone text-danger"></i>
<i class="icon-drone text-dark"></i>
<i class="icon-drone text-muted"></i>
<i class="icon-drone text-gray-100"></i>
<i class="icon-drone text-gray-200"></i>
<i class="icon-drone text-gray-300"></i>
<i class="icon-drone text-gray-400"></i>
<i class="icon-drone text-gray-500"></i>
<i class="icon-drone text-gray-600"></i>
<i class="icon-drone text-gray-700"></i>
<i class="icon-drone text-gray-800"></i>
<i class="icon-drone text-gray-900"></i>
Icon Sizes
The font icons can be sized using
.fs-{size}class that defined with
$font-sizesvariable in
sass/_variables.scssWhere
sizeis one of:
-
1- sets icon size that equals to<h1>font size -
2- sets icon size that equals to<h2>font size -
3- sets icon size that equals to<h3>font size -
4- sets icon size that equals to<h4>font size -
5- sets icon size that equals to<h5>font size -
6- sets icon size that equals to<h6>font size -
7- sets icon size that equals to<h7>font size -
7- sets icon size that equals to0.95 of $font-size-basewhere$font-size-base: 1rem -
8- sets icon size that equals to0.85 of $font-size-basewhere$font-size-base: 1rem -
9- sets icon size that equals to0.75 of $font-size-basewhere$font-size-base: 1rem -
10- sets icon size that equals to0.5 of $font-size-basewhere$font-size-base: 1rem -
base- sets icon size that equals to$font-size-basewhere$font-size-base: 1rem -
fluid- sets icon size that equals to100% -
2x- sets icon size that equals to2 of $font-size-basewhere$font-size-base: 1rem -
2qx- sets icon size that equals to2.25 of $font-size-basewhere$font-size-base: 1rem -
2hx- sets icon size that equals to2.5 of $font-size-basewhere$font-size-base: 1rem -
2tx- sets icon size that equals to2.75 of $font-size-basewhere$font-size-base: 1rem -
3x- sets icon size that equals to3 of $font-size-basewhere$font-size-base: 1rem -
3qx- sets icon size that equals to3.25 of $font-size-basewhere$font-size-base: 1rem -
3hx- sets icon size that equals to3.5 of $font-size-basewhere$font-size-base: 1rem -
3tx- sets icon size that equals to3.75 of $font-size-basewhere$font-size-base: 1rem -
4x- sets icon size that equals to4 of $font-size-basewhere$font-size-base: 1rem -
4qx- sets icon size that equals to4.25 of $font-size-basewhere$font-size-base: 1rem -
4hx- sets icon size that equals to4.5 of $font-size-basewhere$font-size-base: 1rem -
4tx- sets icon size that equals to4.75 of $font-size-basewhere$font-size-base: 1rem -
5x- sets icon size that equals to5 of $font-size-basewhere$font-size-base: 1rem -
5qx- sets icon size that equals to5.25 of $font-size-basewhere$font-size-base: 1rem -
5hx- sets icon size that equals to5.5 of $font-size-basewhere$font-size-base: 1rem -
5tx- sets icon size that equals to5.75 of $font-size-basewhere$font-size-base: 1rem
.fs-5x
.fs-4x
.fs-3x
.fs-2tx
.fs-2hx
.fs-2qx
.fs-2x
.fs-1
.fs-2
.fs-3
.fs-5
.fs-6
<i class="icon-drone fs-5x"></i>
<i class="icon-drone fs-4x"></i>
<i class="icon-drone fs-3x"></i>
<i class="icon-drone fs-2tx"></i>
<i class="icon-drone fs-2hx"></i>
<i class="icon-drone fs-2qx"></i>
<i class="icon-drone fs-2x"></i>
<i class="icon-drone fs-1"></i>
<i class="icon-drone fs-2"></i>
<i class="icon-drone fs-3"></i>
<i class="icon-drone fs-5"></i>
<i class="icon-drone fs-6"></i>
Icons Listing
Warning: file_put_contents(/var/www/preview.keenthemes.com/kt-products/metronic/releases/2021-12-16-170947/core/html/dist/view/pages/documentation/icons/custom-icons/_cache.php): Failed to open stream: Permission denied in /var/www/preview.keenthemes.com/kt-products/metronic/releases/2021-12-16-170947/core/html/dist/view/pages/documentation/icons/custom-icons/_listing.phpon line 117
2021©
Keenthemes
