Skip to content
Related Articles

Related Articles

Bulma | Icon
  • Last Updated : 18 Jun, 2020

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 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.

Example 1: This example creating plain icons using Bulma.




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
  
        div {
            text-align: center;
        }
  
        strong {
            margin-right: 5px;
        }
    </style>
</head>
  
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
  
    <div class='container'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div>
                    <h1 class='title has-text-centered'>
                        Plain Icons
                    </h1>
                </div>
  
                <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>
                        <strong>Notification:</strong>
                        <span class="icon">
                            <i class="fas fa-bell"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Headphone:</strong>
                        <span class="icon">
                            <i class="fas fa-headphones"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Home:</strong>
                        <span class="icon">
                            <i class="fas fa-home"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Reply:</strong>
                        <span class="icon">
                            <i class="fas fa-reply"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Music:</strong>
                        <span class="icon">
                            <i class="fas fa-music"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Example 2: This example creating some colorful Icons using Bulma.




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
  
        div {
            text-align: center;
        }
  
        strong {
            margin-right: 5px;
        }
    </style>
</head>
  
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
  
    <div class='container'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div>
                    <h1 class='title 
                        has-text-centered'>
                        Colorful Icons
                    </h1>
                </div>
  
                <div class='box'>
                    <div>
                        <strong>Username:</strong>
                        <span class="icon">
                            <i class="fas fa-user 
                                has-text-link"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Password:</strong>
                        <span class="icon">
                            <i class="fas fa-lock 
                                has-text-black"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Notification:</strong>
                        <span class="icon">
                            <i class="fas fa-bell 
                                has-text-success"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Headphone:</strong>
                        <span class="icon">
                            <i class="fas fa-headphones 
                                has-text-danger"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Home:</strong>
                        <span class="icon">
                            <i class="fas fa-home 
                                has-text-black"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Reply:</strong>
                        <span class="icon">
                            <i class="fas fa-reply 
                                has-text-info"></i>
                        </span>
                    </div>
  
                    <div>
                        <strong>Music:</strong>
                        <span class="icon">
                            <i class="fas fa-music 
                                has-text-danger"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:



Example 3: This example creating icons with different sizes.




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 25px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
  
        strong {
            margin-right: 5px;
        }
    </style>
</head>
  
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
  
    <div class='container has-text-centered'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-7'>
                <div>
                    <h1 class='title 
                        has-text-centered'>
                        Different size Icons
                    </h1>
                </div>
  
                <div class='box'>
                    <!-- creating table to show 
                        differnt sizes of a icon -->
                    <table class='table is-fullwidth is-striped'>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Small</th>
                                <th>Medium</th>
                                <th>Large</th>
                            </tr>
                        </thead>
  
                        <tbody>
                            <tr>
                                <td><strong>Username</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-user 
                                        fa-lg has-text-link "></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-user 
                                        fa-2x has-text-link"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-user 
                                        fa-3x has-text-link"></i>
                                    </span>
                                </td>
                            </tr>
  
                            <tr>
                                <td><strong>Password</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-lock 
                                        fa-lg has-text-black "></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-lock 
                                        fa-2x has-text-black"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-lock 
                                        fa-3x has-text-black"></i>
                                    </span>
                                </td>
                            </tr>
  
                            <tr>
                                <td><strong>Notification</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-bell 
                                        fa-lg has-text-success"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-bell fa-2x 
                                        has-text-success"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-bell 
                                        fa-3x has-text-success"></i>
                                    </span>
                                </td>
                            </tr>
  
                            <tr>
                                <td><strong>Headphone</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-headphones 
                                        fa-lg has-text-danger"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-headphones 
                                        fa-2x has-text-danger"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-headphones 
                                        fa-3x has-text-danger"></i>
                                    </span>
                                </td>
                            </tr>
  
                            <tr>
                                <td><strong>Home</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-home 
                                        fa-lg has-text-black"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-home 
                                        fa-2x has-text-black"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-home 
                                        fa-3x has-text-black"></i>
                                    </span>
                                </td>
                            </tr>
  
                            <tr>
                                <td><strong>Reply</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-reply 
                                        fa-lg has-text-info"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-reply 
                                        fa-2x has-text-info"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-reply 
                                        fa-3x has-text-info"></i>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Example 4: Rotated Icons




<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 25px;
      }
      h1{
        margin-top:10px;
        margin-bottom:20px;
        color:green !important
      }
   
      strong{
        margin-right: 5px;
      }
   
    </style>
  </head>
  
  <body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
   
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-7'>
          <div>
            <h1 class='title has-text-centered'>
                Rotated Icons
            </h1>
          </div>
   
          <div class='box'>
            <!-- creating table to show 
                differnt sizes of a icon -->
            <table class='table 
                is-fullwidth is-striped'>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Normal</th>
                  <th>Left</th>
                  <th>Right</th>
                  <th>Opposite</th>
                </tr>
              </thead>
   
              <tbody>
                <tr>
                  <td><strong>Username</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user 
                        fa-lg has-text-link"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user 
                        fa-lg has-text-link " 
                        data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user 
                      fa-lg has-text-link" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user 
                      fa-lg has-text-link" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
   
                <tr>
                  <td><strong>Password</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock 
                      fa-lg has-text-black"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock 
                      fa-lg has-text-black" 
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock 
                      fa-lg has-text-block" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock 
                      fa-lg has-text-black" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
   
                <tr>
                  <td><strong>Notification</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell 
                      fa-lg has-text-success"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell fa-lg 
                        has-text-success" 
                        data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell fa-lg 
                      has-text-success" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell 
                      fa-lg has-text-success" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
   
                <tr>
                  <td><strong>Headphone</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones 
                      fa-lg has-text-danger"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones 
                      fa-lg has-text-danger" 
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones 
                      fa-lg has-text-danger" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones 
                      fa-lg has-text-danger" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
   
                <tr>
                  <td><strong>Home</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home 
                      fa-lg has-text-black"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home 
                      fa-lg has-text-black" 
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home 
                      fa-lg has-text-black" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home 
                      fa-lg has-text-black" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
   
                <tr>
                  <td><strong>Reply</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply 
                      fa-lg has-text-info"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply 
                      fa-lg has-text-info" 
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply 
                      fa-lg has-text-info" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply 
                      fa-lg has-text-info" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
   
                <tr>
                  <td><strong>Music</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music 
                      fa-lg has-text-danger"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music 
                      fa-lg has-text-danger" 
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music 
                      fa-lg has-text-danger" 
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music f
                      a-lg has-text-danger" 
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output:

Example 5: Stacked Icons




<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 25px;
      }
      h1{
        margin-top:10px;
        margin-bottom:20px;
        color:green !important
      }
         
      .fa-stack-1x{
        left:6px;
        top:2px;
        bottom:2px;
        right:1px;
      }
    </style>
  </head>
  
  <body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
   
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-5'>
          <div>
            <h1 class='title has-text-centered'>
                Statcked Icons
            </h1>
          </div>
   
          <div class='box'>
            <div>
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-camera 
                        fa-stack-1x"></i>
                  <i class="fas fa-ban 
                    fa-stack-2x has-text-danger"></i>
                </span>
              </span>
   
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle 
                    fa-stack-2x has-text-success"></i>
                  <i class="fas fa-phone-alt 
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
   
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle 
                    fa-stack-2x has-text-danger"></i>
                  <i class="fas fa-phone-alt 
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
   
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle 
                    fa-stack-2x has-text-info"></i>
                  <i class="fas fa-play 
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
   
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle 
                    fa-stack-2x has-text-danger"></i>
                  <i class="fas fa-music 
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :