En este artículo, aprenderemos sobre la mezcla de contenedores Bulma Font Awesome. El mixin del contenedor Font Awesome crea un elemento de bloque en línea cuadrado que se usa para contener un ícono o grupo de íconos de cualquier tipo o categoría. El mixin usa dos parámetros para agregar algo de estilo al contenedor. El primer parámetro $size define el tamaño de fuente del icono mientras que el segundo, es decir, el parámetro $dimensions , define las dimensiones del contenedor que se está creando.
Clase de contenedor Bulma Font Awesome: para crear un mixin, Bulma no proporciona una clase específica, en su lugar, podemos crear nuestra clase y luego diseñar el elemento con la ayuda de mixins SASS.
Sintaxis:
<span class="bulma-fa-mixin">
<i class="fab fa-instagram"></i>
</span>
.bulma-fa-mixin {
@include fa(2rem, 3rem);
background-color: black;
}
Ejemplo 1: El siguiente ejemplo ilustra el contenedor Bulma Font Awesome en un solo icono.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle"> Bulma Font Awesome Container </h1> <span class="bulma-fa-mixin"> <i class="fas fa-thumbs-up"></i> </span> </div> </body> </html>
CSS
@mixin fa($size, $dimensions) {
display: inline-block;
font-size: $size;
text-align: center;
vertical-align: top;
width: $dimensions;
height: $dimensions;
}
.bulma-fa-mixin {
@include fa(2rem, 4rem);
background-color: aqua;
}
Producción:
Contenedor impresionante de fuente Bulma
Ejemplo 2: el siguiente ejemplo ilustra los múltiples contenedores Font Awesome.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle"> Bulma Font Awesome Container </h1> <span class="bulma-fa-mixin"> <i class="fab fa-github"> </i> </span> <span class="bulma-fa-mixin"> <i class="fab fa-facebook"> </i> </span> <span class="bulma-fa-mixin"> <i class="fab fa-linkedin"> </i> </span> <span class="bulma-fa-mixin"> <i class="fab fa-instagram"> </i> </span> </div> </body> </html>
CSS
@mixin fa($size, $dimensions) {
display: inline-block;
font-size: $size;
color: white;
padding: 10px;
text-align: center;
vertical-align: top;
width: $dimensions;
}
.bulma-fa-mixin {
@include fa(2rem, 3rem);
background-color: black;
}
Producción:
Referencia: https://bulma.io/documentation/utilities/mixins/#font-awesome-container
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA