Las clases de tamaño de icono de Bulma se utilizan para definir el tamaño del contenedor de iconos. El contenedor de íconos en Bulma viene en 4 tamaños diferentes: pequeño, predeterminado, mediano y grande . El tamaño del contenedor de iconos se puede configurar utilizando las clases CSS proporcionadas por Bulma. Las dimensiones predeterminadas del contenedor de iconos son 1,5 rem × 1,5 rem.
Clases de tamaño de icono:
- is-small: esta clase establece el tamaño del contenedor de iconos en 1 rem × 1 rem.
- is-medium: esta clase establece el tamaño del contenedor de iconos en 2 rem × 2 rem.
- is-large: esta clase establece el tamaño del contenedor de iconos en 3 rem × 3 rem.
Nota: estas clases anteriores solo cambian el tamaño del contenedor del icono, no el icono real.
Sintaxis:
<span class="icon is-small">
<i class="fas fa-exclamation-triangle"></i>
</span>
Ejemplo: El siguiente ejemplo ilustra el uso de las clases de tamaño de icono de Bulma para establecer el tamaño del contenedor de iconos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Icon Sizes</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.container>div {
margin-top: 25px;
}
.icon {
background-color: rgba(0, 220, 0, 0.5);
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b>Bulma Icon Sizes</b>
<div class="container">
<div>
<span class="icon is-large">
<i class="fas fa-home"></i>
</span>
</div>
<div>
<span class="icon is-medium">
<i class="fas fa-list"></i>
</span>
</div>
<div>
<span class="icon">
<i class="fas fa-camera"></i>
</span>
</div>
<div>
<span class="icon is-small">
<i class="fas fa-spinner"></i>
</span>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/elements/icon/#sizes