Bulma Icon Sizes
Bulma Icon Size classes are used to define the size of the icon container. The icon container in Bulma comes in 4 different sizes: small, default, medium, and large. The icon container size can be set by using the CSS classes provided by Bulma. The default dimensions of the icon container are 1.5rem × 1.5rem.
Icon Size Classes:
- is-small: This class sets the size of the icon container to 1rem × 1rem.
- is-medium: This class sets the size of the icon container to 2rem × 2rem.
- is-large: This class sets the size of the icon container to 3rem × 3rem.
Note: These classes above only change the size of the icon container, not the actual icon.
Syntax:
<span class="icon is-small">
<i class="fas fa-exclamation-triangle"></i>
</span>Example: The below example illustrates the use of Bulma icon size classes to set the size of the icon container.
HTML
<!DOCTYPE html><html> <head> <title>Bulma Icon Sizes</title> <link rel="stylesheet" href= <link rel="stylesheet" href= <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> |
Output:
Reference: https://bulma.io/documentation/elements/icon/#sizes
Please Login to comment...