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.
<!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 creates some colorful Icons using Bulma.
<!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 creates icons with different sizes.
<!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>
Output:
Example 4: Rotated Icons
<!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
<!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'>
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:
