diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 670 |
1 files changed, 659 insertions, 11 deletions
diff --git a/index.html b/index.html index e8f7d364e..6630c54d8 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Icons · Official open source SVG icon library for Bootstrap</title> <meta name="description" content="Official open source SVG icon library for Bootstrap"> -<meta name="generator" content="Hugo 0.79.1"> +<meta name="generator" content="Hugo 0.80.0"> <link rel="canonical" href="https://icons.getbootstrap.com/"> @@ -116,7 +116,7 @@ </li> </ul> - <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" href="https://github.com/twbs/icons/archive/v1.2.2.zip">Download</a> + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" href="https://github.com/twbs/icons/archive/v1.3.0.zip">Download</a> </div> </nav> </header> @@ -128,7 +128,7 @@ <img srcset="/assets/img/icons-hero.png, /assets/img/icons-hero@2x.png 2x" src="/assets/img/icons-hero.png" class="img-fluid my-3 mx-auto" - alt="Bootstrap Icons" width="450" height="340" loading="lazy"> + alt="Bootstrap Icons" width="450" height="340"> </div> <div class="col-lg-7"> <a class="d-block d-sm-inline-block py-1 px-3 mb-4 text-dark text-decoration-none rounded-3 hero-notice" href="https://blog.getbootstrap.com/2020/12/11/bootstrap-icons-1-2-0/"> @@ -147,12 +147,14 @@ <hr class="mx-auto mx-lg-0 my-5"> <p class="text-muted"> - Currently v1.2.2 + Currently v1.3.0 <span class="px-1">•</span> <a href="#icons">Icons</a> <span class="px-1">•</span> <a href="#install">Install</a> <span class="px-1">•</span> + <a href="#quickstart">Quickstart</a> + <span class="px-1">•</span> <a href="#usage">Usage</a> <span class="px-1">•</span> <a href="#styling">Styling</a> @@ -1065,6 +1067,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">backspace</div> </a> </li> + <li class="col mb-4" data-tags="3d display dimension"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-3d-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-3d-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-3d-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="3d display dimension"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-3d/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-3d"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-3d</div> + </a> + </li> <li class="col mb-4" data-tags="4k display resolution retina"> <a class="d-block text-dark text-decoration-none" href="/icons/badge-4k-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -1125,6 +1147,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">badge-ad</div> </a> </li> + <li class="col mb-4" data-tags="augmented reality ar"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-ar-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-ar-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-ar-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="augmented reality ar"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-ar/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-ar"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-ar</div> + </a> + </li> <li class="col mb-4" data-tags="closed captioning"> <a class="d-block text-dark text-decoration-none" href="/icons/badge-cc-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -1205,6 +1247,46 @@ <div class="name text-muted text-decoration-none text-center pt-1">badge-vo</div> </a> </li> + <li class="col mb-4" data-tags="virtual reality vr"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-vr-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-vr-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-vr-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="virtual reality vr"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-vr/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-vr"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-vr</div> + </a> + </li> + <li class="col mb-4" data-tags="wash closet wc"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-wc-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-wc-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-wc-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="wash closet wc"> + <a class="d-block text-dark text-decoration-none" href="/icons/badge-wc/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#badge-wc"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">badge-wc</div> + </a> + </li> <li class="col mb-4" data-tags="shopping checkout check cart basket bag"> <a class="d-block text-dark text-decoration-none" href="/icons/bag-check-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -1775,6 +1857,86 @@ <div class="name text-muted text-decoration-none text-center pt-1">bootstrap</div> </a> </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-all/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-all"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-all</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-bottom/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-bottom"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-bottom</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-center/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-center"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-center</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-inner/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-inner"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-inner</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-left/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-left"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-left</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-middle/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-middle"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-middle</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-outer/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-outer"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-outer</div> + </a> + </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-right/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-right"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-right</div> + </a> + </li> <li class="col mb-4" data-tags="borders wysiwyg"> <a class="d-block text-dark text-decoration-none" href="/icons/border-style/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -1785,6 +1947,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">border-style</div> </a> </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border-top/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border-top"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border-top</div> + </a> + </li> <li class="col mb-4" data-tags="borders wysiwyg"> <a class="d-block text-dark text-decoration-none" href="/icons/border-width/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -1795,6 +1967,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">border-width</div> </a> </li> + <li class="col mb-4" data-tags="borders"> + <a class="d-block text-dark text-decoration-none" href="/icons/border/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#border"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">border</div> + </a> + </li> <li class="col mb-4" data-tags="text shape resize dimensions"> <a class="d-block text-dark text-decoration-none" href="/icons/bounding-box-circles/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -4506,6 +4688,16 @@ </a> </li> <li class="col mb-4" data-tags="minus"> + <a class="d-block text-dark text-decoration-none" href="/icons/dash-circle-dotted/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#dash-circle-dotted"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">dash-circle-dotted</div> + </a> + </li> + <li class="col mb-4" data-tags="minus"> <a class="d-block text-dark text-decoration-none" href="/icons/dash-circle-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -4526,6 +4718,16 @@ </a> </li> <li class="col mb-4" data-tags="minus"> + <a class="d-block text-dark text-decoration-none" href="/icons/dash-square-dotted/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#dash-square-dotted"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">dash-square-dotted</div> + </a> + </li> + <li class="col mb-4" data-tags="minus"> <a class="d-block text-dark text-decoration-none" href="/icons/dash-square-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -5245,6 +5447,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">envelope</div> </a> </li> + <li class="col mb-4" data-tags="erase remove"> + <a class="d-block text-dark text-decoration-none" href="/icons/eraser-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#eraser-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">eraser-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="erase remove"> + <a class="d-block text-dark text-decoration-none" href="/icons/eraser/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#eraser"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">eraser</div> + </a> + </li> <li class="col mb-4" data-tags="alert warning"> <a class="d-block text-dark text-decoration-none" href="/icons/exclamation-circle-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -5405,6 +5627,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">eye</div> </a> </li> + <li class="col mb-4" data-tags="color picker"> + <a class="d-block text-dark text-decoration-none" href="/icons/eyedropper/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#eyedropper"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">eyedropper</div> + </a> + </li> <li class="col mb-4" data-tags="eyeball look see glasses reading"> <a class="d-block text-dark text-decoration-none" href="/icons/eyeglasses/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -7296,6 +7528,26 @@ </a> </li> <li class="col mb-4" data-tags="hand pointer cursor"> + <a class="d-block text-dark text-decoration-none" href="/icons/hand-index-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#hand-index-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">hand-index-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="hand pointer cursor"> + <a class="d-block text-dark text-decoration-none" href="/icons/hand-index-thumb-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#hand-index-thumb-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="hand pointer cursor"> <a class="d-block text-dark text-decoration-none" href="/icons/hand-index-thumb/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -7316,6 +7568,16 @@ </a> </li> <li class="col mb-4" data-tags="hand pointer thumbs-down -1"> + <a class="d-block text-dark text-decoration-none" href="/icons/hand-thumbs-down-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#hand-thumbs-down-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="hand pointer thumbs-down -1"> <a class="d-block text-dark text-decoration-none" href="/icons/hand-thumbs-down/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -7326,6 +7588,16 @@ </a> </li> <li class="col mb-4" data-tags="hand pointer thumbs-up +1"> + <a class="d-block text-dark text-decoration-none" href="/icons/hand-thumbs-up-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#hand-thumbs-up-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="hand pointer thumbs-up +1"> <a class="d-block text-dark text-decoration-none" href="/icons/hand-thumbs-up/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -8115,6 +8387,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">laptop</div> </a> </li> + <li class="col mb-4" data-tags="arrange layers back"> + <a class="d-block text-dark text-decoration-none" href="/icons/layer-backward/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#layer-backward"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">layer-backward</div> + </a> + </li> + <li class="col mb-4" data-tags="arrange layers front"> + <a class="d-block text-dark text-decoration-none" href="/icons/layer-forward/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#layer-forward"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">layer-forward</div> + </a> + </li> <li class="col mb-4" data-tags="perspective stacked"> <a class="d-block text-dark text-decoration-none" href="/icons/layers-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -8265,6 +8557,46 @@ <div class="name text-muted text-decoration-none text-center pt-1">life-preserver</div> </a> </li> + <li class="col mb-4" data-tags="lights"> + <a class="d-block text-dark text-decoration-none" href="/icons/lightbulb-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#lightbulb-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">lightbulb-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="lights"> + <a class="d-block text-dark text-decoration-none" href="/icons/lightbulb-off-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#lightbulb-off-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="lights"> + <a class="d-block text-dark text-decoration-none" href="/icons/lightbulb-off/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#lightbulb-off"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off</div> + </a> + </li> + <li class="col mb-4" data-tags="lights"> + <a class="d-block text-dark text-decoration-none" href="/icons/lightbulb/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#lightbulb"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">lightbulb</div> + </a> + </li> <li class="col mb-4" data-tags="weather storm thunder bolt"> <a class="d-block text-dark text-decoration-none" href="/icons/lightning-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -8465,6 +8797,36 @@ <div class="name text-muted text-decoration-none text-center pt-1">markdown</div> </a> </li> + <li class="col mb-4" data-tags="mask"> + <a class="d-block text-dark text-decoration-none" href="/icons/mask/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#mask"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">mask</div> + </a> + </li> + <li class="col mb-4" data-tags="loudspeaker announcement"> + <a class="d-block text-dark text-decoration-none" href="/icons/megaphone-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#megaphone-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">megaphone-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="loudspeaker announcement"> + <a class="d-block text-dark text-decoration-none" href="/icons/megaphone/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#megaphone"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">megaphone</div> + </a> + </li> <li class="col mb-4" data-tags="dropdown menu context app ui"> <a class="d-block text-dark text-decoration-none" href="/icons/menu-app-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -8616,6 +8978,16 @@ </a> </li> <li class="col mb-4" data-tags="mice input"> + <a class="d-block text-dark text-decoration-none" href="/icons/mouse-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#mouse-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">mouse-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="mice input"> <a class="d-block text-dark text-decoration-none" href="/icons/mouse/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -8626,6 +8998,16 @@ </a> </li> <li class="col mb-4" data-tags="mice input"> + <a class="d-block text-dark text-decoration-none" href="/icons/mouse2-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#mouse2-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">mouse2-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="mice input"> <a class="d-block text-dark text-decoration-none" href="/icons/mouse2/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -8636,6 +9018,16 @@ </a> </li> <li class="col mb-4" data-tags="mice input"> + <a class="d-block text-dark text-decoration-none" href="/icons/mouse3-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#mouse3-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">mouse3-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="mice input"> <a class="d-block text-dark text-decoration-none" href="/icons/mouse3/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -8815,6 +9207,46 @@ <div class="name text-muted text-decoration-none text-center pt-1">outlet</div> </a> </li> + <li class="col mb-4" data-tags="color paint fill palette"> + <a class="d-block text-dark text-decoration-none" href="/icons/paint-bucket/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#paint-bucket"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">paint-bucket</div> + </a> + </li> + <li class="col mb-4" data-tags="color paint fill palette"> + <a class="d-block text-dark text-decoration-none" href="/icons/palette-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#palette-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">palette-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="color paint fill palette"> + <a class="d-block text-dark text-decoration-none" href="/icons/palette/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#palette"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">palette</div> + </a> + </li> + <li class="col mb-4" data-tags="color paint fill palette"> + <a class="d-block text-dark text-decoration-none" href="/icons/palette2/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#palette2"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">palette2</div> + </a> + </li> <li class="col mb-4" data-tags="attachment"> <a class="d-block text-dark text-decoration-none" href="/icons/paperclip/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -9315,6 +9747,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">phone-landscape</div> </a> </li> + <li class="col mb-4" data-tags=""> + <a class="d-block text-dark text-decoration-none" href="/icons/phone-vibrate-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#phone-vibrate-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate-fill</div> + </a> + </li> <li class="col mb-4" data-tags="mobile telephone haptic"> <a class="d-block text-dark text-decoration-none" href="/icons/phone-vibrate/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -9355,6 +9797,46 @@ <div class="name text-muted text-decoration-none text-center pt-1">pie-chart</div> </a> </li> + <li class="col mb-4" data-tags="pushpin thumbtack"> + <a class="d-block text-dark text-decoration-none" href="/icons/pin-angle-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#pin-angle-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">pin-angle-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="pushpin thumbtack"> + <a class="d-block text-dark text-decoration-none" href="/icons/pin-angle/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#pin-angle"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">pin-angle</div> + </a> + </li> + <li class="col mb-4" data-tags="pushpin thumbtack"> + <a class="d-block text-dark text-decoration-none" href="/icons/pin-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#pin-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">pin-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="pushpin thumbtack"> + <a class="d-block text-dark text-decoration-none" href="/icons/pin/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#pin"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">pin</div> + </a> + </li> <li class="col mb-4" data-tags="picture tv television display nested"> <a class="d-block text-dark text-decoration-none" href="/icons/pip-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -9456,6 +9938,16 @@ </a> </li> <li class="col mb-4" data-tags="add new"> + <a class="d-block text-dark text-decoration-none" href="/icons/plus-circle-dotted/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#plus-circle-dotted"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">plus-circle-dotted</div> + </a> + </li> + <li class="col mb-4" data-tags="add new"> <a class="d-block text-dark text-decoration-none" href="/icons/plus-circle-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -9476,6 +9968,16 @@ </a> </li> <li class="col mb-4" data-tags="add new"> + <a class="d-block text-dark text-decoration-none" href="/icons/plus-square-dotted/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#plus-square-dotted"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">plus-square-dotted</div> + </a> + </li> + <li class="col mb-4" data-tags="add new"> <a class="d-block text-dark text-decoration-none" href="/icons/plus-square-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> <svg class="bi" width="1em" height="1em" fill="currentColor"> @@ -9855,6 +10357,56 @@ <div class="name text-muted text-decoration-none text-center pt-1">rss</div> </a> </li> + <li class="col mb-4" data-tags="measure guide"> + <a class="d-block text-dark text-decoration-none" href="/icons/rulers/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#rulers"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">rulers</div> + </a> + </li> + <li class="col mb-4" data-tags="save floppy"> + <a class="d-block text-dark text-decoration-none" href="/icons/save-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#save-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">save-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="save floppy"> + <a class="d-block text-dark text-decoration-none" href="/icons/save/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#save"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">save</div> + </a> + </li> + <li class="col mb-4" data-tags="save floppy"> + <a class="d-block text-dark text-decoration-none" href="/icons/save2-fill/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#save2-fill"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">save2-fill</div> + </a> + </li> + <li class="col mb-4" data-tags="save floppy"> + <a class="d-block text-dark text-decoration-none" href="/icons/save2/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#save2"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">save2</div> + </a> + </li> <li class="col mb-4" data-tags="cut shears"> <a class="d-block text-dark text-decoration-none" href="/icons/scissors/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -10695,6 +11247,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">speaker</div> </a> </li> + <li class="col mb-4" data-tags="speed tachometer dashboard"> + <a class="d-block text-dark text-decoration-none" href="/icons/speedometer/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#speedometer"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">speedometer</div> + </a> + </li> + <li class="col mb-4" data-tags="speed tachometer dashboard"> + <a class="d-block text-dark text-decoration-none" href="/icons/speedometer2/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#speedometer2"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">speedometer2</div> + </a> + </li> <li class="col mb-4" data-tags="spelling grammar"> <a class="d-block text-dark text-decoration-none" href="/icons/spellcheck/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -10735,6 +11307,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">square</div> </a> </li> + <li class="col mb-4" data-tags="layers"> + <a class="d-block text-dark text-decoration-none" href="/icons/stack/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#stack"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">stack</div> + </a> + </li> <li class="col mb-4" data-tags="shape like favorite"> <a class="d-block text-dark text-decoration-none" href="/icons/star-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -11015,6 +11597,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">sunglasses</div> </a> </li> + <li class="col mb-4" data-tags="align orientation mirror"> + <a class="d-block text-dark text-decoration-none" href="/icons/symmetry-horizontal/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#symmetry-horizontal"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">symmetry-horizontal</div> + </a> + </li> + <li class="col mb-4" data-tags="align orientation mirror"> + <a class="d-block text-dark text-decoration-none" href="/icons/symmetry-vertical/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#symmetry-vertical"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">symmetry-vertical</div> + </a> + </li> <li class="col mb-4" data-tags="spreadsheet"> <a class="d-block text-dark text-decoration-none" href="/icons/table/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -11105,6 +11707,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">tags</div> </a> </li> + <li class="col mb-4" data-tags="telegram"> + <a class="d-block text-dark text-decoration-none" href="/icons/telegram/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#telegram"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">telegram</div> + </a> + </li> <li class="col mb-4" data-tags="telephone phone call"> <a class="d-block text-dark text-decoration-none" href="/icons/telephone-fill/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -12005,6 +12617,16 @@ <div class="name text-muted text-decoration-none text-center pt-1">watch</div> </a> </li> + <li class="col mb-4" data-tags="whatsapp"> + <a class="d-block text-dark text-decoration-none" href="/icons/whatsapp/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#whatsapp"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">whatsapp</div> + </a> + </li> <li class="col mb-4" data-tags="internet network wireless"> <a class="d-block text-dark text-decoration-none" href="/icons/wifi-1/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -12045,6 +12667,26 @@ <div class="name text-muted text-decoration-none text-center pt-1">wifi</div> </a> </li> + <li class="col mb-4" data-tags="application desktop os"> + <a class="d-block text-dark text-decoration-none" href="/icons/window-dock/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#window-dock"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">window-dock</div> + </a> + </li> + <li class="col mb-4" data-tags="application desktop"> + <a class="d-block text-dark text-decoration-none" href="/icons/window-sidebar/"> + <div class="p-3 py-4 mb-2 bg-light text-center rounded"> + <svg class="bi" width="1em" height="1em" fill="currentColor"> + <use xlink:href="bootstrap-icons.svg#window-sidebar"/> + </svg> + </div> + <div class="name text-muted text-decoration-none text-center pt-1">window-sidebar</div> + </a> + </li> <li class="col mb-4" data-tags="app application"> <a class="d-block text-dark text-decoration-none" href="/icons/window/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -12192,18 +12834,25 @@ <h2 id="install">Install</h2> <p>Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.</p> <div class="row my-4"> - <div class="col-md-6"> + <div class="col-md-4"> <h3 id="npm">npm</h3> -<p>Install Bootstrap Icons via command line with npm.</p> +<p>Install <a href="https://www.npmjs.com/package/bootstrap-icons">Bootstrap Icons</a>—including SVGs, icon sprite, and icon fonts—with npm. Then, choose who you’d like to include the icons with the <a href="#usage">usage instructions</a>.</p> <div class="highlight"><pre class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons</code></pre></div> </div> - <div class="col-md-6"> + <div class="col-md-4"> <h3 id="download">Download</h3> -<p><a href="https://github.com/twbs/icons/releases/">All releases are published on GitHub</a> and include icon SVGs, license, and readme. Our <code>package.json</code> is also included, though our npm scripts are primarily available for our development workflows.</p> +<p><a href="https://github.com/twbs/icons/releases/">Releases are published on GitHub</a> and include icon SVGs, fonts, license, and readme. Our <code>package.json</code> is also included, though our npm scripts are primarily available for our development workflows.</p> <p><a class="btn btn-outline-primary" href="https://github.com/twbs/icons/releases/latest/">Download latest ZIP</a></p> </div> + <div class="col-md-4"> +<h3 id="cdn">CDN</h3> +<p>Include the icon fonts stylesheet—in your website <code><head></code> or via <code>@import</code> in CSS—from our CDN and get started in seconds. <a href="#icon-font">See icon font docs</a> for examples.</p> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="p">></span></code></pre></div> +<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span></code></pre></div> + + </div> </div> <h2 id="usage">Usage</h2> <p>Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. Bootstrap Icons include a <code>width</code> and <code>height</code> of <code>1em</code> by default to allow for easy resizing via <code>font-size</code>.</p> @@ -12332,12 +12981,11 @@ <li><a href="https://twitter.com/getbootstrap">Twitter</a></li> <li><a href="https://getbootstrap.com/docs/5.0/about/overview/">About</a></li> </ul> - <p>Currently v1.2.2. Icons and documentation licensed <a href="https://github.com/twbs/icons/blob/main/LICENSE.md" target="_blank" rel="license noopener">MIT</a>.</p> + <p>Currently v1.3.0. Icons and documentation licensed <a href="https://github.com/twbs/icons/blob/main/LICENSE.md" target="_blank" rel="license noopener">MIT</a>.</p> </div> </footer> - +<script src="/assets/js/bootstrap.min.js" async></script> <script src="/assets/js/list.min.js"></script> -<script src="/assets/js/bootstrap.min.js"></script> <script> new List('icons-body', { valueNames: ['name', { data: ['tags'] }] |