Por primera vez, Bootstrap tiene su propia biblioteca de iconos, diseñada y construida a medida para los componentes y la documentación de Bootstrap.
Los iconos de Bootstrap están diseñados para funcionar con los componentes de Bootstrap, desde los controles de formulario hasta la navegación. Los iconos de Bootstrap son SVG, por lo que se escalan de forma rápida y sencilla y se pueden diseñar con CSS. Si bien están diseñados para Bootstrap, agregarán cualquier proyecto. Son de código abierto bajo la licencia MIT, por lo que puede descargarlos, usarlos y personalizarlos según lo necesite.
Cómo instalar:
Los íconos de Bootstrap se publican en npm, pero también se pueden descargar si es necesario.
Instale los iconos de Bootstrap a través de la línea de comandos con npm.
npm install bootstrap-icons
Uso:
Los iconos de Bootstrap son SVG. Por lo tanto, puede incluirlo en su código HTML de varias maneras según el tipo de proyecto en el que esté trabajando.
- Copie y pegue SVG como HTML incrustado
- SVG Sprite con elemento <use>
- Como una imagen externa
Nota: Los íconos de Bootstrap incluyen un ancho y alto de » 1 em » de forma predeterminada para permitir un cambio de tamaño fácil a través del tamaño de fuente.
Copie y pegue SVG como HTML incrustado: incruste sus íconos dentro del HTML de su página (a diferencia de un archivo de imagen externo). Aquí hemos utilizado un ancho y una altura personalizados.
HTML
<svg class="bi bi-chevron-right " width="64" height="64" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/> </svg>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Cards</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/v5.0.0/css/bootstrap.min.css" /> </head> <body> <svg class="bi bi-chevron-right" width="64" height="64" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/> </svg> </body> </html>
Producción: 
Sprite SVG con elemento <use>: use el sprite SVG para insertar cualquier icono a través del elemento <use>. Utilice el nombre de archivo del icono como identificador del fragmento (p. ej., corazón es #corazón). Los sprites SVG le permiten hacer referencia a un archivo externo similar a un elemento <img>, pero con el poder de currentColor para facilitar la creación de temas.
Ejemplo:
HTML
<svg class="bi" width="40" height="40" fill="currentColor"> <use xlink:href= "bootstrap-icons.svg#heart-fill"/> </svg> <svg class="bi" width="40" height="40" fill="currentColor"> <use xlink:href= "bootstrap-icons.svg#toggles"/> </svg> <svg class="bi" width="40" height="40" fill="currentColor"> <use xlink:href= "bootstrap-icons.svg#shop"/> </svg>
Producción:
Como imagen externa: copie los SVG de los iconos de Bootstrap en cualquier directorio de su elección y haga referencia a ellos como imágenes normales con la etiqueta <img>.
Ejemplo:
HTML
<img src="/Icons/img/bootstrap.svg" alt="" width="40" height="40" title="Icons">
Producción:
Estilo de iconos:
Para el estilo de los íconos, considérelos igual que el texto. El color también se puede cambiar usando una clase .text-* o CSS personalizado.
Ejemplo:
HTML
<svg class="bi bi-alert-triangle text-success " width="40" height="40" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> ..... </svg>
Producción:
