Bulma | Icon
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 creates plain icons using Bulma.
html
<!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 creates some colorful Icons using Bulma.
html
<!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 creates icons with different sizes.
html
<!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 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> |
Output:
Example 4: Rotated Icons
html
<!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 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= <!-- 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'> Stacked 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:
Please Login to comment...