Bulma es un marco CSS moderno construido en flexbox . Viene con componentes y elementos prediseñados que le permiten crear sitios web hermosos y receptivos rápidamente.
En este artículo, veremos cómo agregar íconos a las pestañas en Bulma. Para agregar íconos a las pestañas, solo tiene que agregar un contenedor de íconos que contenga el ícono dentro de la etiqueta <a> . Puede usar cualquier icono de fuente impresionante con clase fas .
Clases de iconos de pestañas de Bulma:
- fa-image: se utiliza para configurar el icono de imagen de fuente impresionante.
- fa-music: se utiliza para configurar el icono de fuente de música impresionante.
- fa-film: se utiliza para configurar el ícono de video font-awesome.
- fa-file-art: se utiliza para configurar el icono del documento font-awesome.
Sintaxis:
<div class="tabs">
<span class="icon">
<i class="fas fa-film"></i>
</span>
</div>
Ejemplo: El siguiente ejemplo ilustra cómo usar los íconos de pestañas en Bulma. Para alinear las pestañas, hemos utilizado la clase is-centered . Hay varios tamaños disponibles para elegir el tamaño, ya que hemos utilizado la clase is-small .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tab Icons</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.container>.tabs{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Tab Icons</b>
<div class="container">
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Iconos de pestañas de Bulma
Referencia: https://bulma.io/documentation/components/tabs/#icons