Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos y móviles. Un ícono es una representación visual que ayuda a comprender el sitio web y también ayuda a navegar por el sitio web. En otras palabras, un ícono es una señal que especifica la tarea particular para la cual se usa el ícono, se debe realizar. Los iconos de Bootstrap decoran la página web/sitio web en un formato estándar que le da un aspecto agradable. Una biblioteca de iconos de arranque contiene más de 1300 iconos con un diseño de alta calidad y de uso gratuito. Para usar dichos íconos, usaremos el enlace CDN de Bootstrap para incluirlo en el documento HTML.
Sintaxis:
<i class="bi bi-icon_name"></i>
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”/>
Enlace CSS del icono de fuente de Bootstrap:
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css” />
Acercarse:
- Vaya al sitio oficial de Bootstrap y copie los enlaces Bootstrap CDN para CSS, JS, Popper.js y jQuery.
- Agregue el enlace CDN junto con el enlace Agregar icono de fuente dentro de la etiqueta <head>
- Agregue la clase con bi bi-icon_name seguido del nombre del icono.
Ejemplo 1: Este ejemplo ilustra el icono del globo terráqueo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <title>Bootstrap Icons in HTML</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Font Icon CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> </head> <body> <center> <h1 style="color: green"> Geeks For Geeks </h1> <h1 class="m-4">Globe Icon: <i class="bi-globe"></i> </h1> </center> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra el icono de búsqueda.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <title>Bootstrap Icons in HTML</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Font Icon CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> </head> <body> <center> <h1 style="color: green"> Geeks For Geeks </h1> <h1 class="m-4">Search Icon: <i class="bi-search"></i> </h1> </center> </body> </html>
Producción:
Ejemplo 3: Este ejemplo ilustra el icono de alarma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <title>Bootstrap Icons in HTML</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Font Icon CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> </head> <body style="margin-top: 45px"> <center> <h1 style="color: green"> Geeks For Geeks </h1> <h1 class="m-4">Alarm Icon: <i class="bi-alarm"></i> </h1> </center> </body> </html>
Producción:
Ejemplo 4: Este ejemplo ilustra el ícono del carrito.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <title>Bootstrap Icons in HTML</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Font Icon CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> </head> <body> <center> <h1 style="color: green"> Geeks For Geeks </h1> <h1 class="m-4">Cart Icon: <i class="bi-cart"></i> </h1> </center> </body> </html>
Producción:
Referencia: https://icons.getbootstrap.com/
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA