Overview
Bootstrap Icons is a free, high quality, open source icon library with nearly 1,200 icons. Include them anyway you like SVGs, SVG sprite, or web fonts.
Ugage
copy
< i class = " bi bi-bookmarks-fill fs-2x" > </ i>
< i class = " bi bi-calendar-check fs-2x" > </ i>
< i class = " bi bi-check2-square fs-2x" > </ i>
< i class = " bi bi-diagram-3 fs-2x" > </ i>
< i class = " bi bi-gear fs-2x " > </ i>
< i class = " bi bi-circle-square fs-2x" > </ i>
< i class = " bi bi-graph-down fs-2x" > </ i>
< i class = " bi bi-vector-pen fs-2x" > </ i>
Icon Colors
The inline icons can be colored using
.text-{color}
class that defined with
$theme-text-colors
variable in
sass/_variables.scss
:
copy
< i class = " bi bi-droplet-half text-white" > </ i>
< i class = " bi bi-droplet-half text-primary" > </ i>
< i class = " bi bi-droplet-half text-secondary" > </ i>
< i class = " bi bi-droplet-half text-light" > </ i>
< i class = " bi bi-droplet-half text-success" > </ i>
< i class = " bi bi-droplet-half text-info" > </ i>
< i class = " bi bi-droplet-half text-warning" > </ i>
< i class = " bi bi-droplet-half text-danger" > </ i>
< i class = " bi bi-droplet-half text-dark" > </ i>
< i class = " bi bi-droplet-half text-muted" > </ i>
< i class = " bi bi-droplet-half text-gray-100" > </ i>
< i class = " bi bi-droplet-half text-gray-200" > </ i>
< i class = " bi bi-droplet-half text-gray-300" > </ i>
< i class = " bi bi-droplet-half text-gray-400" > </ i>
< i class = " bi bi-droplet-half text-gray-500" > </ i>
< i class = " bi bi-droplet-half text-gray-600" > </ i>
< i class = " bi bi-droplet-half text-gray-700" > </ i>
< i class = " bi bi-droplet-half text-gray-800" > </ i>
< i class = " bi bi-droplet-half text-gray-900" > </ i>
Icon Sizes
The font icons can be sized using
.fs-{size}
class that defined with
$font-sizes
variable in
sass/_variables.scss
Where
size
is 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 to
0.95 of $font-size-base
where
$font-size-base: 1rem
8
- sets icon size that equals to
0.85 of $font-size-base
where
$font-size-base: 1rem
9
- sets icon size that equals to
0.75 of $font-size-base
where
$font-size-base: 1rem
10
- sets icon size that equals to
0.5 of $font-size-base
where
$font-size-base: 1rem
base
- sets icon size that equals to
$font-size-base
where
$font-size-base: 1rem
fluid
- sets icon size that equals to
100%
2x
- sets icon size that equals to
2 of $font-size-base
where
$font-size-base: 1rem
2qx
- sets icon size that equals to
2.25 of $font-size-base
where
$font-size-base: 1rem
2hx
- sets icon size that equals to
2.5 of $font-size-base
where
$font-size-base: 1rem
2tx
- sets icon size that equals to
2.75 of $font-size-base
where
$font-size-base: 1rem
3x
- sets icon size that equals to
3 of $font-size-base
where
$font-size-base: 1rem
3qx
- sets icon size that equals to
3.25 of $font-size-base
where
$font-size-base: 1rem
3hx
- sets icon size that equals to
3.5 of $font-size-base
where
$font-size-base: 1rem
3tx
- sets icon size that equals to
3.75 of $font-size-base
where
$font-size-base: 1rem
4x
- sets icon size that equals to
4 of $font-size-base
where
$font-size-base: 1rem
4qx
- sets icon size that equals to
4.25 of $font-size-base
where
$font-size-base: 1rem
4hx
- sets icon size that equals to
4.5 of $font-size-base
where
$font-size-base: 1rem
4tx
- sets icon size that equals to
4.75 of $font-size-base
where
$font-size-base: 1rem
5x
- sets icon size that equals to
5 of $font-size-base
where
$font-size-base: 1rem
5qx
- sets icon size that equals to
5.25 of $font-size-base
where
$font-size-base: 1rem
5hx
- sets icon size that equals to
5.5 of $font-size-base
where
$font-size-base: 1rem
5tx
- sets icon size that equals to
5.75 of $font-size-base
where
$font-size-base: 1rem
copy
< i class = " bi bi-droplet-half fs-5x" > </ i>
< i class = " bi bi-droplet-half fs-4x" > </ i>
< i class = " bi bi-droplet-half fs-3x" > </ i>
< i class = " bi bi-droplet-half fs-2tx" > </ i>
< i class = " bi bi-droplet-half fs-2hx" > </ i>
< i class = " bi bi-droplet-half fs-2qx" > </ i>
< i class = " bi bi-droplet-half fs-2x" > </ i>
< i class = " bi bi-droplet-half fs-1" > </ i>
< i class = " bi bi-droplet-half fs-2" > </ i>
< i class = " bi bi-droplet-half fs-3" > </ i>
< i class = " bi bi-droplet-half fs-5" > </ i>
< i class = " bi bi-droplet-half fs-6" > </ i>