HTML Version
Vue3 VersionBootstrap Icons
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.
Usage
Use Bootstrap Icons with a spesific class as explained in the Icons Preview Page:
<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>
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
<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>
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 size2- sets icon size that equals to<h2>font size3- sets icon size that equals to<h3>font size4- sets icon size that equals to<h4>font size5- sets icon size that equals to<h5>font size6- sets icon size that equals to<h6>font size7- sets icon size that equals to<h7>font size7- sets icon size that equals to0.95 of $font-size-basewhere$font-size-base: 1rem8- sets icon size that equals to0.85 of $font-size-basewhere$font-size-base: 1rem9- sets icon size that equals to0.75 of $font-size-basewhere$font-size-base: 1rem10- sets icon size that equals to0.5 of $font-size-basewhere$font-size-base: 1rembase- sets icon size that equals to$font-size-basewhere$font-size-base: 1remfluid- sets icon size that equals to100%2x- sets icon size that equals to2 of $font-size-basewhere$font-size-base: 1rem2qx- sets icon size that equals to2.25 of $font-size-basewhere$font-size-base: 1rem2hx- sets icon size that equals to2.5 of $font-size-basewhere$font-size-base: 1rem2tx- sets icon size that equals to2.75 of $font-size-basewhere$font-size-base: 1rem3x- sets icon size that equals to3 of $font-size-basewhere$font-size-base: 1rem3qx- sets icon size that equals to3.25 of $font-size-basewhere$font-size-base: 1rem3hx- sets icon size that equals to3.5 of $font-size-basewhere$font-size-base: 1rem3tx- sets icon size that equals to3.75 of $font-size-basewhere$font-size-base: 1rem4x- sets icon size that equals to4 of $font-size-basewhere$font-size-base: 1rem4qx- sets icon size that equals to4.25 of $font-size-basewhere$font-size-base: 1rem4hx- sets icon size that equals to4.5 of $font-size-basewhere$font-size-base: 1rem4tx- sets icon size that equals to4.75 of $font-size-basewhere$font-size-base: 1rem5x- sets icon size that equals to5 of $font-size-basewhere$font-size-base: 1rem5qx- sets icon size that equals to5.25 of $font-size-basewhere$font-size-base: 1rem5hx- sets icon size that equals to5.5 of $font-size-basewhere$font-size-base: 1rem5tx- 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="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>