Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El ícono es una especie de contenedor cuadrado que reserva espacio para la fuente del ícono. Bulma es compatible con todas las bibliotecas de fuentes de íconos: Font Awesome, Material Design Icons, Ionicons, etc.
Ejemplo 1: Este ejemplo crea íconos simples usando 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>
Producción:
Ejemplo 2: Este ejemplo crea algunos íconos coloridos usando 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>
Producción:
Ejemplo 3: Este ejemplo crea íconos con diferentes tamaños.
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>
Ejemplo 4: iconos rotados
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>
Producción:
Ejemplo 5: iconos apilados
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA