Icon Bar

Crea un menú de navegación con íconos, usando HTML y CSS.

Menú vertical:

Menú horizontal:

Marcado HTML

1. Crea un nuevo proyecto en codepen.io

2. Agrega el marcado HTML para crear el menú

    <div class="icon-bar">
        <a class="active" href="#"><i class="fa fa-home"></i></a>
        <a href="#"><i class="fa fa-search"></i></a>
        <a href="#"><i class="fa fa-envelope"></i></a>
        <a href="#"><i class="fa fa-globe"></i></a>
        <a href="#"><i class="fa fa-trash"></i></a>
    </div>
   

3. Usa una biblioteca de íconos como FontAwesome para agregar íconos al menú de navegación.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Estilos CSS

Clases CSS para añadir apariencia al marcado HTML.

body {
    color: #181a1b;
    font-size: 1rem;
    font-family: "Outfit", sans-serif;
    background: linear-gradient(90deg, #fffdcd, #a3e6ff);
    margin: 0;
}

.icon-bar {
    width: 90px; /* Establece un ancho especifico */
    background-color: #555; /* color del fondo dark-grey */
}

.icon-bar a {
    display: block; /* Hace que los enlaces aparezcan uno debajo del otro en lugar de uno al lado del otro */
    text-align: center; /* Elemento alineado al centro */
    padding: 16px; /* Agregamos un poco de relleno */
    transition: all 0.3s ease; /* Agrega transicion para el efecto :hover */
    color: white; /* Color blanco para el ícono */
    font-size: 36px; /* Incrementa el tamaño del ícono */
}

.icon-bar a:hover {
    background-color: #000; /* Agrega un color para el efecto :hover */
}

.active {
    background-color: #04aa6d; /* Agrega un color para el ícono activo */
}

Referencias

El contenido de este artículo es una inspiración y traducción de:

• How TO - Icon Bar

---

"La mejor manera de aprender a programar es practicando todos los días"