Instalación y uso básico de iconos
Bootstrap Icons es la librería oficial de iconos diseñada específicamente para complementar el ecosistema de Bootstrap. Esta colección incluye más de 1.800 iconos vectoriales SVG que mantienen la coherencia visual y estética del framework, proporcionando una solución integral para enriquecer la interfaz de usuario sin necesidad de librerías externas.
Los iconos de Bootstrap están diseñados como iconos vectoriales escalables que se renderizan de forma nítida en cualquier tamaño y resolución, manteniendo la calidad visual tanto en pantallas estándar como en dispositivos de alta densidad de píxeles.
Instalación mediante CDN
La forma más sencilla y rápida de comenzar a usar Bootstrap Icons es mediante CDN (Content Delivery Network). Esta aproximación no requiere descarga de archivos ni configuración compleja:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi proyecto con Bootstrap Icons</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
</head>
<body>
<!-- Tu contenido aquí -->
</body>
</html>
El enlace del CDN debe colocarse después de Bootstrap CSS en el <head> del documento para mantener el orden correcto de carga de estilos.
Instalación local
Para proyectos que requieren control total sobre los assets o funcionamiento offline, puedes descargar Bootstrap Icons localmente:
1 - Descarga directa:
Visita el repositorio oficial y descarga la carpeta fonts que contiene los archivos CSS y las fuentes de iconos.
2 - Estructura de archivos:
mi-proyecto/
├── css/
│ ├── bootstrap.min.css
│ └── bootstrap-icons.css
├── fonts/
│ └── bootstrap-icons.woff2
└── index.html
3 - Enlace local:
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-icons.css" rel="stylesheet">
</head>
Sintaxis básica de uso
Bootstrap Icons utiliza una sintaxis de clases consistente que sigue el patrón bi bi-[nombre-icono]. La clase base bi establece las propiedades fundamentales, mientras que la segunda clase define el icono específico:
<!-- Estructura básica -->
<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>
<i class="bi bi-house"></i>
Los iconos pueden implementarse usando diferentes elementos HTML según el contexto semántico:
<!-- Con elemento <i> (más común) -->
<i class="bi bi-envelope"></i>
<!-- Con elemento <span> -->
<span class="bi bi-phone"></span>
<!-- Con elemento semántico -->
<em class="bi bi-info-circle"></em>
Iconos más utilizados
Bootstrap Icons incluye categorías principales que cubren las necesidades más comunes en interfaces web:
Navegación y controles:
<i class="bi bi-arrow-left"></i>
<i class="bi bi-arrow-right"></i>
<i class="bi bi-arrow-up"></i>
<i class="bi bi-arrow-down"></i>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
Comunicación y contacto:
<i class="bi bi-envelope"></i>
<i class="bi bi-telephone"></i>
<i class="bi bi-chat-dots"></i>
<i class="bi bi-send"></i>
Estados y feedback:
<i class="bi bi-check-circle"></i>
<i class="bi bi-x-circle"></i>
<i class="bi bi-exclamation-triangle"></i>
<i class="bi bi-info-circle"></i>
Acciones comunes:
<i class="bi bi-search"></i>
<i class="bi bi-download"></i>
<i class="bi bi-upload"></i>
<i class="bi bi-trash"></i>
<i class="bi bi-pencil"></i>
<i class="bi bi-gear"></i>
Verificación de la instalación
Para confirmar que Bootstrap Icons se ha instalado correctamente, puedes crear una página de prueba simple:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba Bootstrap Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container mt-5">
<h1>Prueba de Bootstrap Icons</h1>
<div class="d-flex gap-3 fs-1">
<i class="bi bi-heart text-danger"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-house text-primary"></i>
<i class="bi bi-gear text-secondary"></i>
</div>
</div>
</body>
</html>
Si los iconos aparecen correctamente con sus respectivos colores, la instalación está funcionando perfectamente y estás listo para integrar iconos en tus componentes de Bootstrap.
La instalación mediante CDN es la opción recomendada para la mayoría de proyectos debido a su simplicidad, actualizaciones automáticas y optimización de carga, mientras que la instalación local proporciona mayor control y es ideal para entornos de desarrollo sin conexión a internet.
Integración con componentes existentes
Los iconos de Bootstrap están diseñados para integrarse perfectamente con todos los componentes del framework, enriqueciendo la experiencia visual y mejorando la comunicación con el usuario. Esta integración mantiene la consistencia del diseño mientras proporciona indicadores visuales claros sobre la funcionalidad de cada elemento.
Integración con botones
Los botones con iconos mejoran significativamente la usabilidad al proporcionar referencias visuales inmediatas sobre su función. Los iconos pueden posicionarse antes del texto, después del texto, o usarse solos:
<!-- Botones con iconos y texto -->
<button type="button" class="btn btn-primary">
<i class="bi bi-download me-2"></i>Descargar
</button>
<button type="button" class="btn btn-success">
<i class="bi bi-check-circle me-2"></i>Confirmar
</button>
<button type="button" class="btn btn-danger">
Eliminar<i class="bi bi-trash ms-2"></i>
</button>
Para botones que contienen solo iconos, es importante mantener la accesibilidad añadiendo atributos descriptivos:
<!-- Botones de solo iconos -->
<button type="button" class="btn btn-outline-secondary" aria-label="Editar">
<i class="bi bi-pencil"></i>
</button>
<button type="button" class="btn btn-outline-primary" aria-label="Configuración">
<i class="bi bi-gear"></i>
</button>
<button type="button" class="btn btn-outline-danger" aria-label="Cerrar">
<i class="bi bi-x"></i>
</button>
Los grupos de botones se benefician especialmente de los iconos para diferencias las acciones disponibles:
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary">
<i class="bi bi-eye"></i>
</button>
<button type="button" class="btn btn-outline-primary">
<i class="bi bi-pencil"></i>
</button>
<button type="button" class="btn btn-outline-primary">
<i class="bi bi-trash"></i>
</button>
</div>
Integración con elementos de navegación
Los iconos en navegación proporcionan referencias visuales que ayudan a los usuarios a identificar rápidamente las secciones y funcionalidades:
<!-- Navs con iconos -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi bi-house me-2"></i>Inicio
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-person me-2"></i>Perfil
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-gear me-2"></i>Configuración
</a>
</li>
</ul>
En navbars, los iconos mejoran la identificación de secciones principales y acciones:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-shop me-2"></i>Mi Tienda
</a>
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">
<i class="bi bi-search me-1"></i>Buscar
</a>
<a class="nav-link" href="#">
<i class="bi bi-cart me-1"></i>Carrito
<span class="badge bg-danger ms-1">3</span>
</a>
<a class="nav-link" href="#">
<i class="bi bi-person-circle me-1"></i>Perfil
</a>
</div>
</div>
</nav>
Los breadcrumbs pueden incluir iconos para mejorar la jerarquía visual:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#"><i class="bi bi-house me-1"></i>Inicio</a>
</li>
<li class="breadcrumb-item">
<a href="#"><i class="bi bi-folder me-1"></i>Categoría</a>
</li>
<li class="breadcrumb-item active">
<i class="bi bi-file-text me-1"></i>Producto
</li>
</ol>
</nav>
Integración con cards
Las cards enriquecidas con iconos comunican mejor el tipo de contenido y las acciones disponibles:
<div class="card">
<div class="card-header d-flex align-items-center">
<i class="bi bi-person-badge me-2 text-primary"></i>
<h5 class="card-title mb-0">Información de Usuario</h5>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-envelope me-3 text-muted"></i>
<span>usuario@ejemplo.com</span>
</div>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-telephone me-3 text-muted"></i>
<span>+34 123 456 789</span>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-sm me-2">
<i class="bi bi-pencil me-1"></i>Editar
</button>
<button class="btn btn-outline-secondary btn-sm">
<i class="bi bi-eye me-1"></i>Ver perfil
</button>
</div>
</div>
Para cards de estadísticas o métricas, los iconos ayudan a identificar rápidamente cada indicador:
<div class="row">
<div class="col-md-3">
<div class="card text-center">
<div class="card-body">
<i class="bi bi-people display-4 text-primary mb-3"></i>
<h3 class="card-title">1,234</h3>
<p class="card-text text-muted">Usuarios activos</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center">
<div class="card-body">
<i class="bi bi-cart-check display-4 text-success mb-3"></i>
<h3 class="card-title">567</h3>
<p class="card-text text-muted">Ventas este mes</p>
</div>
</div>
</div>
</div>
Integración con formularios
Los iconos en formularios mejoran la usabilidad al proporcionar indicadores visuales sobre el tipo de información esperada:
<form>
<!-- Input groups con iconos -->
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-person"></i>
</span>
<input type="text" class="form-control" placeholder="Nombre de usuario">
</div>
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-envelope"></i>
</span>
<input type="email" class="form-control" placeholder="Correo electrónico">
</div>
<div class="input-group mb-3">
<span class="input-group-text">
<i class="bi bi-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Contraseña">
</div>
</form>
Los botones de acción en formularios se benefician significativamente de los iconos:
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle me-2"></i>Guardar
</button>
<button type="reset" class="btn btn-outline-secondary">
<i class="bi bi-arrow-clockwise me-2"></i>Resetear
</button>
<button type="button" class="btn btn-outline-danger">
<i class="bi bi-x-circle me-2"></i>Cancelar
</button>
</div>
Integración con alertas y notificaciones
Las alertas con iconos comunican de forma más efectiva el tipo de mensaje y su nivel de importancia:
<!-- Alertas con iconos de estado -->
<div class="alert alert-success d-flex align-items-center" role="alert">
<i class="bi bi-check-circle-fill me-2"></i>
<div>¡Operación completada exitosamente!</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
<div>Atención: Revisa la información antes de continuar.</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<i class="bi bi-x-circle-fill me-2"></i>
<div>Error: No se pudo completar la operación.</div>
</div>
<div class="alert alert-info d-flex align-items-center" role="alert">
<i class="bi bi-info-circle-fill me-2"></i>
<div>Información adicional sobre esta funcionalidad.</div>
</div>
Los toasts también se enriquecen con iconos para mejor comunicación visual:
<div class="toast" role="alert">
<div class="toast-header">
<i class="bi bi-bell-fill me-2 text-primary"></i>
<strong class="me-auto">Notificación</strong>
<small>Hace 2 min</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Tienes un nuevo mensaje en tu bandeja de entrada.
</div>
</div>
Integración con listas y tablas
Los list groups pueden usar iconos para categorizar y diferenciar elementos:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-inbox me-3 text-primary"></i>
Bandeja de entrada
<span class="badge bg-primary rounded-pill ms-auto">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-send me-3 text-success"></i>
Enviados
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-archive me-3 text-warning"></i>
Archivados
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-trash me-3 text-danger"></i>
Papelera
<span class="badge bg-danger rounded-pill ms-auto">3</span>
</a>
</div>
En tablas, los iconos son especialmente útiles para columnas de acciones:
<table class="table">
<thead>
<tr>
<th>Usuario</th>
<th>Email</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Pérez</td>
<td>juan@ejemplo.com</td>
<td>
<span class="badge bg-success">
<i class="bi bi-check-circle me-1"></i>Activo
</span>
</td>
<td>
<button class="btn btn-outline-primary btn-sm me-1" aria-label="Ver">
<i class="bi bi-eye"></i>
</button>
<button class="btn btn-outline-secondary btn-sm me-1" aria-label="Editar">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-outline-danger btn-sm" aria-label="Eliminar">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
La integración consistente de iconos con componentes de Bootstrap crea interfaces más intuitivas y profesionales, manteniendo siempre la coherencia visual del framework mientras mejora significativamente la experiencia del usuario.
Personalización de tamaño, color y posicionamiento
La personalización de iconos aprovecha completamente el sistema de utilidades de Bootstrap que ya dominas, permitiendo ajustar el tamaño, color y posicionamiento de los iconos de forma coherente con el resto del framework. Esta personalización mantiene la consistencia visual mientras adapta los iconos a diferentes contextos y necesidades de diseño.
Personalización de tamaño
Los iconos de Bootstrap heredan el tamaño de fuente del elemento contenedor por defecto, pero pueden personalizarse usando las utilidades de tamaño de texto que ya conoces:
<!-- Tamaños usando utilidades de font-size -->
<div class="d-flex align-items-center gap-3">
<i class="bi bi-heart fs-1"></i>
<i class="bi bi-heart fs-2"></i>
<i class="bi bi-heart fs-3"></i>
<i class="bi bi-heart fs-4"></i>
<i class="bi bi-heart fs-5"></i>
<i class="bi bi-heart fs-6"></i>
</div>
Para tamaños personalizados específicos, puedes usar las utilidades de ancho y alto, aunque es menos común:
<!-- Tamaños personalizados con dimensiones -->
<i class="bi bi-star" style="font-size: 1.5rem;"></i>
<i class="bi bi-star" style="font-size: 2rem;"></i>
<i class="bi bi-star" style="font-size: 3rem;"></i>
En contextos responsive, los iconos pueden adaptarse automáticamente usando las utilidades responsive de tipografía:
<!-- Iconos responsive -->
<i class="bi bi-house fs-6 fs-md-4 fs-lg-2"></i>
<!-- En botones responsive -->
<button class="btn btn-primary">
<i class="bi bi-download fs-6 fs-lg-5 me-2"></i>
<span class="d-none d-md-inline">Descargar archivo</span>
</button>
Los iconos en display pueden usar las utilidades display para crear elementos destacados:
<div class="text-center">
<i class="bi bi-check-circle-fill display-1 text-success mb-3"></i>
<h2>¡Proceso completado!</h2>
<p class="text-muted">La operación se realizó exitosamente</p>
</div>
Personalización de colores
Los colores de iconos se controlan usando las mismas utilidades de color de texto que utilizas en otros componentes:
<!-- Colores semánticos principales -->
<div class="d-flex gap-3 fs-1">
<i class="bi bi-circle-fill text-primary"></i>
<i class="bi bi-circle-fill text-secondary"></i>
<i class="bi bi-circle-fill text-success"></i>
<i class="bi bi-circle-fill text-danger"></i>
<i class="bi bi-circle-fill text-warning"></i>
<i class="bi bi-circle-fill text-info"></i>
</div>
Los colores neutros proporcionan opciones versátiles para diferentes contextos:
<!-- Colores neutros -->
<div class="d-flex gap-3 fs-2">
<i class="bi bi-gear text-dark"></i>
<i class="bi bi-gear text-muted"></i>
<i class="bi bi-gear text-light bg-dark p-2 rounded"></i>
<i class="bi bi-gear text-white bg-primary p-2 rounded"></i>
</div>
En dark mode, los colores se adaptan automáticamente manteniendo el contraste adecuado:
<!-- Iconos que se adaptan a dark mode -->
<div class="card" data-bs-theme="dark">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-moon-stars me-3 text-warning"></i>
<span>Modo oscuro activado</span>
</div>
<div class="d-flex gap-2">
<i class="bi bi-check-circle text-success"></i>
<i class="bi bi-x-circle text-danger"></i>
<i class="bi bi-info-circle text-info"></i>
</div>
</div>
</div>
Los iconos con fondos pueden usar utilidades de background junto con padding para crear elementos destacados:
<!-- Iconos con fondos circulares -->
<div class="d-flex gap-3">
<div class="bg-primary rounded-circle p-3 d-inline-flex">
<i class="bi bi-house text-white fs-4"></i>
</div>
<div class="bg-success rounded-circle p-3 d-inline-flex">
<i class="bi bi-check text-white fs-4"></i>
</div>
<div class="bg-danger rounded-circle p-3 d-inline-flex">
<i class="bi bi-x text-white fs-4"></i>
</div>
</div>
Personalización de posicionamiento y alineación
El espaciado entre iconos y texto se controla con las utilidades de margin que ya dominas:
<!-- Espaciado horizontal -->
<button class="btn btn-primary">
<i class="bi bi-download me-2"></i>Descargar
</button>
<button class="btn btn-success">
Guardar<i class="bi bi-save ms-2"></i>
</button>
<!-- Espaciado vertical en layouts de columna -->
<div class="d-flex flex-column align-items-center">
<i class="bi bi-cloud-upload fs-1 text-primary mb-3"></i>
<h5>Subir archivo</h5>
<p class="text-muted text-center">Arrastra tu archivo aquí</p>
</div>
La alineación vertical es crucial cuando combinas iconos con texto de diferentes tamaños:
<!-- Alineación vertical con texto -->
<div class="d-flex align-items-center mb-3">
<i class="bi bi-envelope fs-5 me-3 text-primary"></i>
<div>
<h6 class="mb-1">Correo electrónico</h6>
<small class="text-muted">usuario@ejemplo.com</small>
</div>
</div>
<!-- Alineación en listas de información -->
<div class="list-unstyled">
<li class="d-flex align-items-start mb-2">
<i class="bi bi-geo-alt text-primary me-2 mt-1"></i>
<span>Calle Principal 123, Ciudad, País</span>
</li>
<li class="d-flex align-items-start mb-2">
<i class="bi bi-telephone text-primary me-2 mt-1"></i>
<span>+34 123 456 789</span>
</li>
</div>
Los iconos centrados funcionan especialmente bien en cards y secciones destacadas:
<!-- Centering con flexbox -->
<div class="card text-center">
<div class="card-body py-5">
<div class="d-flex justify-content-center mb-4">
<i class="bi bi-shield-check display-2 text-success"></i>
</div>
<h4>Seguridad garantizada</h4>
<p class="text-muted">Tus datos están protegidos</p>
</div>
</div>
Combinaciones avanzadas de personalización
La combinación de utilidades permite crear elementos visuales ricos y consistentes:
<!-- Tarjeta de estadística completa -->
<div class="col-md-4">
<div class="card border-0 shadow-sm">
<div class="card-body text-center py-4">
<div class="d-inline-flex align-items-center justify-content-center
bg-primary bg-opacity-10 rounded-circle mb-3"
style="width: 80px; height: 80px;">
<i class="bi bi-people fs-1 text-primary"></i>
</div>
<h3 class="fw-bold">2,543</h3>
<p class="text-muted mb-0">Usuarios registrados</p>
</div>
</div>
</div>
Los iconos en navegación responsive requieren consideraciones especiales de espaciado:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<i class="bi bi-shop me-2 fs-4"></i>
<span class="d-none d-sm-inline">Mi Tienda</span>
</a>
<div class="d-flex align-items-center d-lg-none">
<a class="nav-link px-2" href="#">
<i class="bi bi-search fs-5"></i>
</a>
<a class="nav-link px-2 position-relative" href="#">
<i class="bi bi-cart fs-5"></i>
<span class="position-absolute top-0 start-100 translate-middle
badge rounded-pill bg-danger" style="font-size: 0.7em;">
3
</span>
</a>
</div>
</div>
</nav>
Los formularios con iconos alineados mantienen la consistencia visual:
<form class="needs-validation">
<div class="row g-3">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-person text-muted"></i>
</span>
<input type="text" class="form-control border-start-0 ps-0"
placeholder="Nombre completo">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-envelope text-muted"></i>
</span>
<input type="email" class="form-control border-start-0 ps-0"
placeholder="correo@ejemplo.com">
</div>
</div>
</div>
</form>
Consideraciones de consistencia visual
Mantener la consistencia en el uso de iconos es fundamental para una experiencia de usuario coherente:
<!-- Sistema consistente de iconos de estado -->
<div class="list-group">
<div class="list-group-item d-flex align-items-center">
<div class="d-flex align-items-center justify-content-center
rounded-circle bg-success bg-opacity-10 me-3"
style="width: 40px; height: 40px;">
<i class="bi bi-check-circle text-success"></i>
</div>
<div>
<h6 class="mb-1">Pedido confirmado</h6>
<small class="text-muted">Hace 5 minutos</small>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="d-flex align-items-center justify-content-center
rounded-circle bg-warning bg-opacity-10 me-3"
style="width: 40px; height: 40px;">
<i class="bi bi-clock text-warning"></i>
</div>
<div>
<h6 class="mb-1">En preparación</h6>
<small class="text-muted">Hace 2 horas</small>
</div>
</div>
</div>
La personalización coherente de Bootstrap Icons usando las utilidades del framework garantiza que los iconos se integren perfectamente con el diseño general, manteniendo la armonía visual mientras proporcionan la flexibilidad necesaria para adaptar cada elemento a su contexto específico.
Fuentes y referencias
Documentación oficial y recursos externos para profundizar en Bootstrap
Documentación oficial de Bootstrap
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Bootstrap es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.
Más tutoriales de Bootstrap
Explora más contenido relacionado con Bootstrap y continúa aprendiendo con nuestros tutoriales gratuitos.
Aprendizajes de esta lección
- Comprender qué es Bootstrap Icons y su propósito dentro del ecosistema Bootstrap.
- Aprender a instalar Bootstrap Icons mediante CDN y localmente.
- Conocer la sintaxis básica para utilizar iconos en HTML.
- Integrar iconos en componentes Bootstrap como botones, navegación, cards, formularios y alertas.
- Personalizar tamaño, color y posicionamiento de los iconos usando utilidades de Bootstrap.