<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Icon</
title
>
<
link
rel
=
'stylesheet'
href
=
<
style
>
div.columns {
margin-top: 25px;
}
h1 {
margin-top: 10px;
margin-bottom: 20px;
color: green !important
}
strong {
margin-right: 5px;
}
</
style
>
</
head
>
<
body
>
<
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'
>
<
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
>