Bulma | Icon - GeeksforGeeks

04 Oct, 2021
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. 
html
<!DOCTYPE html><html> <head>    <title>Bulma Icon</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>     <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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. 
html
<!DOCTYPE html><html> <head>    <title>Bulma Icon</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>     <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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.  
html
<!DOCTYPE html><html> <head>    <title>Bulma Icon</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>     <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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                        different 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 
html
<!DOCTYPE html><html>  <head>    <title>Bulma Icon</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>     <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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                different 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 
html
<!DOCTYPE html><html>  <head>    <title>Bulma Icon</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>     <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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:  
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sagartomar9927
Bulma
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?