¿Cómo usar iconos en Bootstrap Framework?

Bootstrap es un marco CSS para desarrollar sitios web receptivos y móviles. Bootstrap agregó una función en la que se pueden usar íconos de calidad proporcionados por Bootstrap. Estos íconos están disponibles en formato SVG o fuentes web.

Bootstrap proporciona más de mil íconos de alta calidad, que puede usar en su proyecto. También puede cambiar el color y cambiar el tamaño de estos iconos según sus necesidades.

¿Qué hace que los íconos en el marco Bootstrap sean diferentes y por qué deberíamos usarlo? 

  • La ‘flexibilidad’ es lo que lo hace diferente de otras soluciones de iconos. Si está utilizando íconos en el marco Bootstrap, puede cambiar el color del ícono con la ayuda de la propiedad de color de CSS.
  • También puede cambiar el tamaño del icono utilizando la propiedad de tamaño de fuente de CSS.
  • Bootstrap no es necesario para usar los íconos de Bootstrap en su proyecto, puede usarlo con o sin Bootstrap.

Sintaxis básica para usar iconos de Bootstrap:

<i class="bi-class-name"></i>

El elemento <i> es el elemento contenedor que se utiliza para agregar iconos de Bootstrap. La string ‘bi-‘ siempre se adjunta antes del nombre de clase de los iconos. Se refiere a iconos de arranque. El nombre de clase es básicamente una clase de icono que estamos usando. Bootstrap nos proporciona muchas clases de íconos como Facebook, Twitter, un globo terráqueo, una estrella y búsqueda, etc.

Ejemplo: Este es el código HTML del uso del icono de búsqueda de Bootstrap en el botón de envío.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  
    <!--Bootstrap Icons CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  
</head>
  
<body class="container">
    <h2>Welcome To GFG</h2>
    <p>
        The below button is using the bi-search 
        class to display the search icon.
    </p>
  
    <!-- We made a button on which Bootstrap 
        icon of 'search' class present -->
    <button type="submit" class="btn btn-primary">
        <span class="bi-search"></span>
        Search
    </button>
</body>
  
</html>

Salida: el icono de búsqueda que está viendo en el botón que es un icono proporcionado por el marco Bootstrap pertenece a la búsqueda de nombre de clase.

Publicación traducida automáticamente

Artículo escrito por rishabhknit2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *