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= <link rel="stylesheet" href="style.css"> <title>Bulma Variable</title> <!-- font-awesome cdn --> <script src= </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= <link rel="stylesheet" href="style.css"> <title>Bulma Variable</title> <!-- font-awesome cdn --> <script src= </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
Please Login to comment...