Bulma Icon Variables

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Bulma Icon is a kind of square container that reserves space for the icon font. Bulma is compatible with all icon font libraries: Font Awesome, Material Design Icons, Ionicons, etc.

Variable Used:

Variable-Name	Description	Type	Value
$icon-dimensions	This variable is used to define the dimensions of the icon.	size	1.5rem
$icon-dimensions-small	This variable is used to define the small-sized dimensions of the icon.	size	1rem
$icon-dimensions-medium	This variable is used to define the medium-sized dimensions of the icon.	size	2rem
$icon-dimensions-large	This variable is used to define the large-sized dimensions of the icon.	size	3rem
$icon-text-spacing	This variable is used to define the spacing around the icon.	size	0.25em

Example 1: In the below code, we will make use of the above variable to modify the icon.

HTML

<!DOCTYPE html>
<html>

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

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
   <!-- font-awesome cdn -->
   <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3> 

        <div class='box'>
            <div>
                <strong>Username:</strong>
                <span class="icon">
                    <i class="fas fa-user"></i>
                </span>
            </div>
            <div>
                <strong>Password:</strong>
                <span class="icon">
                    <i class="fas fa-lock"></i>
                </span>
            </div>
        </div>   
    </center>
</body>
</html>

SCSS Code:

$icon-dimensions: 1.5rem;
.icon {
   width:$icon-dimensions;
}

Compiled CSS Code:

.icon {
   width: 1.5rem;
}

Output:

Example 2: In the below code, we will make use of the above variable to modify the icon.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
   <!-- font-awesome cdn -->
   <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>  

        <div class='box'>
            <div>
                <strong>Username:</strong>
                <span class="icon">
                    <i class="fas fa-user"></i>
                </span>
            </div>
            <div>
                <strong>Password:</strong>
                <span class="icon">
                    <i class="fas fa-lock"></i>
                </span>
            </div>
        </div>       
    </center>
</body>
</html>

SCSS Code:

$icon-text-spacing: 1.5rem;
.icon {
   padding:$icon-text-spacing;
}

Compiled CSS Code:

.icon {
    padding: 1.5rem; 
}

Output:

Reference: https://bulma.io/documentation/elements/icon/#variables

Explore