diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 233 |
1 files changed, 125 insertions, 108 deletions
diff --git a/index.html b/index.html index 9c1f9c52c..26d0d0580 100644 --- a/index.html +++ b/index.html @@ -5,21 +5,20 @@ <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.92.1"> +<meta name="generator" content="Hugo 0.98.0"> <link rel="canonical" href="https://icons.getbootstrap.com/"> -<link rel="stylesheet" href="/assets/css/bootstrap.min.css"> -<link rel="stylesheet" href="/assets/font/bootstrap-icons.css"><link rel="stylesheet" href="/assets/css/docs.css"> +<link rel="stylesheet" href="/assets/css/docs.css"> <!-- Favicons --> <link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/assets/img/favicons/manifest.json"> -<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> +<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/assets/img/favicons/favicon.ico"> -<meta name="theme-color" content="#7952b3"> +<meta name="theme-color" content="#712cf9"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> @@ -55,70 +54,73 @@ <span class="skippy-text">Skip to main content</span> </a> - <header class="navbar navbar-expand-md navbar-dark bd-navbar"> - <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation"> - <a class="navbar-brand p-0 me-2" href="https://getbootstrap.com/" aria-label="Bootstrap"> - <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg> + <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top"> + <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> + <div class="d-lg-none" style="width: 2.25rem;"></div> + + <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg> </a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> - <svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> - </svg> + <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="/bootstrap-icons.svg#three-dots"></use></svg> </button> - <div class="collapse navbar-collapse" id="bdNavbar"> - <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0"> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://getbootstrap.com/docs/5.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2 active" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> - </li> - </ul> + <div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel"> + <div class="offcanvas-header px-4 pb-0"> + <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5> + <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button> + </div> - <hr class="d-md-none text-white-50"> + <div class="offcanvas-body p-4 pt-0 p-lg-0"> + <hr class="d-lg-none text-white-50"> + <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav"> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2 active" href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" rel="noopener">Blog</a> + </li> + </ul> - <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener"> - <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> - <small class="d-md-none ms-2">GitHub</small> - </a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener"> - <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> - <small class="d-md-none ms-2">Twitter</small> - </a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener"> - <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> - <small class="d-md-none ms-2">Slack</small> - </a> - </li> - <li class="nav-item col-6 col-md-auto"> - <a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener"> - <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> - <small class="d-md-none ms-2">Open Collective</small> - </a> - </li> - </ul> + <hr class="d-lg-none text-white-50"> - <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.8.1.zip">Download</a> + <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + <small class="d-lg-none ms-2">GitHub</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + <small class="d-lg-none ms-2">Twitter</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + <small class="d-lg-none ms-2">Slack</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + <small class="d-lg-none ms-2">Open Collective</small> + </a> + </li> + </ul> + </div> </div> </nav> </header> @@ -139,8 +141,22 @@ <h1 class="f0">Bootstrap Icons</h1> <p class="mb-4 f3 font-weight-normal">Free, high quality, open source icon library with over 1,600 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without <a href="https://getbootstrap.com/">Bootstrap</a> in any project.</p> - <div class="fs-5 d-inline-block mb-3"> - <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons</code></pre></div> + <div class="d-flex flex-column flex-md-row align-items-stretch justify-content-center justify-content-md-start mb-5 fs-5"> + <div class="fs-5 d-inline-block mb-3 me-md-3 mb-md-0"> + <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons</span></span></code></pre></div> + </div> + <a class="btn btn-lg btn-outline-dark d-flex align-items-center justify-content-center" href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" class="me-2" viewBox="0 0 288 432" role="img"> + <rect width="95.0226" height="142.534" fill="black" fill-opacity="0" transform="translate(1.46603 2.19946) scale(3)"/> + <path d="M144 216C144 176.641 175.907 144.733 215.267 144.733V144.733C254.626 144.733 286.534 176.641 286.534 216V216C286.534 255.36 254.626 287.267 215.267 287.267V287.267C175.907 287.267 144 255.36 144 216V216Z" fill="#1ABCFE"/> + <path d="M1.46603 358.534C1.46603 319.175 33.3733 287.267 72.733 287.267H144V358.534C144 397.894 112.093 429.801 72.733 429.801V429.801C33.3733 429.801 1.46603 397.894 1.46603 358.534V358.534Z" fill="#0ACF83"/> + <path d="M144 2.19946V144.733H215.267C254.627 144.733 286.534 112.826 286.534 73.4664V73.4664C286.534 34.1068 254.627 2.19946 215.267 2.19946L144 2.19946Z" fill="#FF7262"/> + <path d="M1.46603 73.4664C1.46603 112.826 33.3733 144.733 72.733 144.733L144 144.733L144 2.19941L72.733 2.19941C33.3733 2.19941 1.46603 34.1067 1.46603 73.4664V73.4664Z" fill="#F24E1E"/> + <path d="M1.46603 216C1.46603 255.36 33.3733 287.267 72.733 287.267H144L144 144.733L72.733 144.733C33.3733 144.733 1.46603 176.641 1.46603 216V216Z" fill="#A259FF"/> +</svg> + + Open in Figma + </a> </div> <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script> @@ -149,7 +165,7 @@ <hr class="mx-auto mx-lg-0 my-5"> <p class="text-muted"> - Currently <a href="https://github.com/twbs/icons/releases/tag/v1.8.1">v1.8.1</a> + Currently <a href="https://github.com/twbs/icons/releases/tag/v1.8.2">v1.8.2</a> <span class="px-1">•</span> <a href="#icons">Icons</a> <span class="px-1">•</span> @@ -175,11 +191,11 @@ <h2 id="icons" class="mb-0">Icons</h2> <form class="subnav-search d-flex flex-nowrap ms-auto"> <label for="search" class="visually-hidden">Search for icons</label> - <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off"> + <input class="form-control search mb-0" id="search" type="search" placeholder="Start typing to filter..." autocomplete="off"> </form> </div> <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled list"> - + <li class="col mb-4" data-tags="numbers" data-categories="typography"> <a class="d-block text-dark text-decoration-none" href="/icons/123/"> <div class="p-3 py-4 mb-2 bg-light text-center rounded"> @@ -16870,7 +16886,7 @@ <div class="col-md-4"> <h3 id="npm">npm</h3> <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 how you’d like to include the icons with the <a href="#usage">usage instructions</a>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons</span></span></code></pre></div> </div> <div class="col-md-4"> @@ -16882,8 +16898,8 @@ <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 tabindex="0" 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.8.1/font/bootstrap-icons.css"</span><span class="p">></span></code></pre></div> -<div class="highlight"><pre tabindex="0" 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.8.1/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><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.8.2/font/bootstrap-icons.css"</span><span class="p">></span></span></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><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.8.2/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span></span></span></code></pre></div> </div> </div> @@ -16895,7 +16911,7 @@ <p>Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom <code>width</code> and <code>height</code>. </div> <div class="col-md-8"> - <div class="bd-example"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-chevron-right"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">><</span><span class="nt">path</span> <span class="na">fill-rule</span><span class="o">=</span><span class="s">"evenodd"</span> <span class="na">d</span><span class="o">=</span><span class="s">"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span></code></pre></div> + <div class="bd-example"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-chevron-right"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">><</span><span class="nt">path</span> <span class="na">fill-rule</span><span class="o">=</span><span class="s">"evenodd"</span> <span class="na">d</span><span class="o">=</span><span class="s">"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span></span></span></code></pre></div> </div> </div> <div class="row my-4"> @@ -16916,15 +16932,15 @@ <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#shop"/> </svg> -</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#heart-fill"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#toggles"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#shop"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span></code></pre></div> +</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#heart-fill"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#toggles"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#shop"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span></span></span></code></pre></div> </div> </div> <div class="row my-4"> @@ -16933,7 +16949,7 @@ <p>Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the <code><img></code> element. </div> <div class="col-md-8"> - <div class="bd-example"><img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32"></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/img/bootstrap.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Bootstrap"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span><span class="p">></span></code></pre></div> + <div class="bd-example"><img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32"></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/img/bootstrap.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Bootstrap"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span><span class="p">></span></span></span></code></pre></div> </div> </div> <div class="row my-4"> @@ -16944,8 +16960,8 @@ </div> <div class="col-md-8"> - <div class="bd-example"><i class="bi-alarm"></i></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span></code></pre></div> - <div class="bd-example"><i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span> <span class="na">style</span><span class="o">=</span><span class="s">"font-size: 2rem; color: cornflowerblue;"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span></code></pre></div> + <div class="bd-example"><i class="bi-alarm"></i></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span></span></span></code></pre></div> + <div class="bd-example"><i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span> <span class="na">style</span><span class="o">=</span><span class="s">"font-size: 2rem; color: cornflowerblue;"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span></span></span></code></pre></div> </div> </div> <div class="row"> @@ -16956,14 +16972,14 @@ </div> <div class="col-md-8"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">bi</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span> - <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span> - <span class="k">content</span><span class="p">:</span> <span class="s2">""</span><span class="p">;</span> - <span class="k">vertical-align</span><span class="p">:</span> <span class="mf">-.125</span><span class="kt">em</span><span class="p">;</span> - <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">"data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>"</span><span class="p">);</span> - <span class="k">background-repeat</span><span class="p">:</span> <span class="kc">no-repeat</span><span class="p">;</span> - <span class="k">background-size</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span> -<span class="p">}</span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">bi</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">content</span><span class="p">:</span> <span class="s2">""</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">vertical-align</span><span class="p">:</span> <span class="mf">-.125</span><span class="kt">em</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">"data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>"</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-repeat</span><span class="p">:</span> <span class="kc">no-repeat</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-size</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div> </div> </div> <div class="row my-4"> @@ -16978,9 +16994,9 @@ <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/> </svg> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-exclamation-triangle text-success"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="p">></span> - ... -<span class="p"></</span><span class="nt">svg</span><span class="p">></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-exclamation-triangle text-success"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span></span></span></code></pre></div> </div> </div> <div class="row my-4"> @@ -16992,31 +17008,31 @@ <div class="bd-example"> <img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32"> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- alt="..." on <img> element --></span> -<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/img/bootstrap.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Bootstrap"</span> <span class="err">...</span><span class="p">></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- alt="..." on <img> element --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/img/bootstrap.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Bootstrap"</span> <span class="err">...</span><span class="p">></span></span></span></code></pre></div> <div class="bd-example"> <i class="bi-github" role="img" style="font-size: 2em" aria-label="GitHub"></i> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-github"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"GitHub"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-github"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"GitHub"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span></span></span></code></pre></div> <div class="bd-example"> <svg class="bi" width="32" height="32" fill="currentColor" role="img" aria-label="Tools"> <use xlink:href="bootstrap-icons.svg#tools"/> </svg> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="err">...</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Tools"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#tools"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="err">...</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Tools"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#tools"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span></span></span></code></pre></div> <div class="bd-example"> <button type="button" class="btn btn-primary" aria-label="Mute"> <svg class="bi bi-volume-mute-fill" width="32" height="32" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6.717 3.55A.5.5 0 017 4v8a.5.5 0 01-.812.39L3.825 10.5H1.5A.5.5 0 011 10V6a.5.5 0 01.5-.5h2.325l2.363-1.89a.5.5 0 01.529-.06zm7.137 2.096a.5.5 0 010 .708L12.207 8l1.647 1.646a.5.5 0 01-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 01-.708-.708L10.793 8 9.146 6.354a.5.5 0 11.708-.708L11.5 7.293l1.646-1.647a.5.5 0 01.708 0z"></path></svg> </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- aria-label="..." on the control --></span> -<span class="p"><</span><span class="nt">button</span> <span class="err">...</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Mute"</span><span class="p">></span> - <span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-volume-mute-fill"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="err">...</span><span class="p">></span> - ... - <span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- aria-label="..." on the control --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="err">...</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Mute"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-volume-mute-fill"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="err">...</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span></span></span></code></pre></div> </div> </div> <div class="row my-4"> @@ -17047,12 +17063,13 @@ <ul class="bd-footer-links"> <li><a href="https://github.com/twbs">GitHub</a></li> <li><a href="https://twitter.com/getbootstrap">Twitter</a></li> - <li><a href="https://getbootstrap.com/docs/5.1/about/overview/">About</a></li> + <li><a href="https://getbootstrap.com/docs/5.2/about/overview/">About</a></li> </ul> - <p>Currently <a href="https://github.com/twbs/icons/releases/tag/v1.8.1">v1.8.1</a>. 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 <a href="https://github.com/twbs/icons/releases/tag/v1.8.2">v1.8.2</a>. 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="/js/bootstrap.min.js"></script> <script src="/assets/js/list.min.js"></script> <script> new List('icons-body', { |