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 más rápido. En este artículo, veremos cómo agregar los íconos a la ruta de navegación en Bulma.
Para agregar íconos a las migas de pan, solo tiene que agregar un contenedor de íconos que contenga el ícono de Font Awesome de su elección dentro de la etiqueta <a> .
Iconos de migas de pan de Bulma:
Las migas de pan en Bulma son útiles para indicar la ubicación de la página actual dentro de una jerarquía de navegación. Bulma proporciona más de mil íconos de Font Awesome que se pueden usar con las migas de pan en lugar de tener clases específicas.
Sintaxis:
<nav class="breadcrumb" aria-label="breadcrumbs">
...
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
...
</nav>
Ejemplo: El siguiente ejemplo muestra cómo usar íconos junto con migas de pan en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Breadcrumbs 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.is-fluid {
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<p>
<b>Bulma Breadcrumbs Icons</b>
</p>
<div class="container is-fluid">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i class="fas fa-list"
aria-hidden="true">
</i>
</span>
<span>Data Structures</span>
</a>
</li>
<li class="is-active">
<a href="#">
<span class="icon is-small">
<i class="fas fa-project-diagram"
aria-hidden="true">
</i>
</span>
<span>Graph</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Salida :
Iconos de migas de pan de Bulma
Referencia: https://bulma.io/documentation/components/breadcrumb/#icons