Bootstrap : Insertar Icono gratis en nuestra web
Bootstrap Icons v1.10.0
Biblioteca de iconos de código abierto, de alta calidad y gratuita con más de 1600 iconos. Inclúyalos como desee: SVG, sprite SVG o fuentes web. Úsalos con o sin Bootstrap en cualquier proyecto.
https://icons.getbootstrap.com/
Modo de Instalar
Al cargar la pagina ir en la pestaña Install
→ Ir a pagina oficial como instalar https://icons.getbootstrap.com/#install
Los iconos de Bootstrap se publican en npm, pero también se pueden descargar manualmente si es necesario.
Tenemos 3 modos de instalar: Package manager , Download , CDN
Modo de Instalar Bootstrap Icons desde CDN
Incluya la hoja de estilo de fuentes de íconos, en su sitio web <head>o a través @importde CSS, desde nuestro CDN y comience en segundos. Ver documentos de fuentes de iconos para ver ejemplos.
Implementandolo a nuestro WordPress - Bootstrap Icons v1.10.0
En nuestro archivo functions.php implementamos el siguiente codigo:
wp_enqueue_style( 'bootstrap_icono', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css');
Modo de Usar Bootstrap Icons desde CDN
→ Ir a pagina oficial como usar https://icons.getbootstrap.com/#usage
Los iconos de Bootstrap son SVG, por lo que puede incluirlos en su HTML de varias maneras, dependiendo de cómo esté configurado su proyecto. Recomendamos usar a width: 1em(y opcionalmente height: 1em) para cambiar el tamaño fácilmente a través de font-size.
Hay diferentes forma de usar los iconos de Bootstrap por ejemplo:
Embedded , Sprite , External image , Icon font , CSS , Styling , Accessibility , Working with SVGs
Usar mediante Icon font
Las fuentes de íconos con clases para cada ícono también se incluyen para los íconos de Bootstrap. Incluya las fuentes web de íconos en su página a través de CSS, luego haga referencia a los nombres de clase según sea necesario en su HTML (p. ej., <i class="bi-alarm-clock"></i>).
<i class="bi-alarm"></i>Utilice font-size y color para cambiar la apariencia del icono.
Usando estilos en línea:
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>Usando codigo css
.bi {
font-size: 10em;
}