Cómo crear: barra lateral con íconos

Cómo crear una barra lateral con íconos

Paso 1 - Añadir HTML:

<!-- Cargar biblioteca de iconos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Barra lateral -->
<div class="sidebar">
  <a href="#home"><i class="fa fa-fw fa-home"></i> Inicio</a>
  <a href="#services"><i class="fa fa-fw fa-wrench"></i> Servicios</a>
  <a href="#clients"><i class="fa fa-fw fa-user"></i> Clientes</a>
  <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contacto</a>
</div>

Segundo paso - Añadir CSS:

/* Estilo de barra lateral - altura completa */
.sidebar {
  altura: 100%;
  ancho: 160px;
  posición: fijo;
  indice-z: 1;
  arriba: 0;
  izquierda: 0;
  color de fondo: #111;
  desbordamiento-x: oculto;
  relleno superior: 16px;
}
/* Establecer estilo de enlace en la barra lateral */
.sidebar a {
  relleno: 6px 8px 6px 16px;
  decoración de texto: none;
  tamaño de fuente: 20px;
  color: #818181;
  mostrar: bloque;
}
/* Establecer estilo de enlace al pasar el ratón */
.sidebar a:hover {
  color: #f1f1f1;
}
/* Estilo de contenido principal */
.main {
  margen izquierdo: 160px; /* Igual al ancho de la barra de navegación lateral */
  relleno: 0px 10px;
}
/* Añadir consulta de medios para pequeñas pantallas (cuando la altura de la pantalla es menor de 450 píxeles, agregar menor relleno interno y tamaño de fuente) */
@media screen and (max-height: 450px) {
  .sidebar {rejilla superior: 15px;}
  .sidebar a {tamaño de fuente: 18px;}
}

Prueba personalmente

Páginas relacionadas

Tutoriales:Barra de navegación CSS

Tutoriales:¿Cómo crear una barra de navegación de iconos