Bulma Font Awesome Container

Last Updated : 07 Mar, 2022

In this article, we’ll learn about Bulma Font Awesome container mixin. The Font Awesome container mixin creates a square inline-block element that is used for containing an icon, or group of icons of any type or category. The mixin uses two parameters for adding some styling into the container. The first one $size parameter defines the font size of the icon whereas the second one i.e, $dimensions parameter defines the dimensions of the container that is being created.

Bulma Font Awesome container Class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.

Syntax:

<span class="bulma-fa-mixin">
    <i class="fab fa-instagram"></i>
</span>

.bulma-fa-mixin {
    @include fa(2rem, 3rem);
    background-color: black;
}

Example 1: Below example illustrates the Bulma Font Awesome Container in a single icon.

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; 
}

Output:

Bulma Font Awesome Container

Example 2: Below example illustrates the multiple Font Awesome Containers.

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; 
}