Skip to content
Related Articles

Related Articles

Bulma Icon Sizes

Improve Article
Save Article
Like Article
  • Last Updated : 20 Jan, 2022

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:

Bulma Icon Sizes

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!