1

Necesito modificar el tamaño de los íconos de bootstrap. Ya probé con incorporar la clase fa-x5, fa-lg y no funciona. De paso comento que no estoy usando clases con fa fa-icon, sino que son bi bi-icon, desconozco también esa diferencia.

El tamaño del div es más que suficiente y la etiqueta style está funcionando correctamente.

4
  • que version es de bootstrap?
    – Lilibeth
    Commented el 14 dic. 2021 a las 3:10
  • No lo sé, te dejo los links de mi html: <link rel="stylesheet" href="cdn.jsdelivr.net/npm/[email protected]/font/…"> <script src="cdn.jsdelivr.net/npm/[email protected]/dist/js/…" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> Commented el 14 dic. 2021 a las 3:47
  • Si te funciona, te invito a votar y a marcar como aceptada mi respuesta con el check que aparece al lado izquierdo, de esta forma ambos ganamos reputación en el sitio. De hecho, te invito a hacer el recorrido para que conozcas las reglas de la comunidad.
    – DjCrazy
    Commented el 14 dic. 2021 a las 4:04
  • Hola @IgnacioGrilli , cualquier ejemplo que pongas deberia ir en la zona de la pregunta para que sea mas accesible y los usuarios lo encuentren mas rapido. Piensa que mientras mas informacion tengan ellos mas facil sera que te puedan ayudar
    – Capt.Teach
    Commented el 14 dic. 2021 a las 7:20

1 respuesta 1

4

Justamente, no te funcionan las clases fa-x5 porque no estás usando los íconos de fontAwesome sino los propios de Bootstrap conocidos como Bootstrap Icons en la versión 5.

Según la documentación oficial:

Uso: Bootstrap Icons son SVGs, puedes incluirlos en tu HTML en pocos pasos dependiendo de la configuración de tu proyecto. Recomendamos usar un width: 1em (y opcionalmente height: 1em) para cambiar el tamaño a través de la propiedad CSS font-size.

Por ejemplo:

.bi {
  font-size: 10em;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>Hello, world!</title>
</head>

<body>
  <h1>Stack Overflow</h1>
  <i class="bi bi-stack-overflow"></i>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

O con estilos en línea:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>Hello, world!</title>
</head>

<body>
  <h1>Stack Overflow</h1>
  <i class="bi bi-stack-overflow" style="font-size: 2em;"></i>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

2
  • Excelente respuesta! ahora funciona! muchas gracias!! Commented el 14 dic. 2021 a las 4:00
  • @IgnacioGrilli: Si funciona por favor márcala como aceptada.
    – masterguru
    Commented el 25 dic. 2021 a las 23:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.