En este capítulo aprenderemos cómo usar CSS para crear iconos de barra de navegación.
Los iconos utilizados son de Font Awesome versión 4.7.
Puedes consultar el tutorial de iconos de Font Awesome:Iconos de Font Awesome
Puedes importar directamente la biblioteca CDN de terceros:
<link rel="stylesheet" href="../cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
Código HTML básico
<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>
Barra de navegación horizontal
Ejemplo
.icon-bar {
width: 100%; /*Ancho de pantalla completa*/
background-color: #555; /*Establecer fondo*/
overflow: auto; /*Ajustar el desbordamiento según el flotado*/
}
.icon-bar a {
float: left; /*Mostrar los elementos uno tras otro en dirección horizontal*/
text-align: center; /*Texto centrado*/
width: 20%; /*Ancho igual (5 botones, cada uno muestra el 20%, 20% * 5 = 100%)*/
padding: 12px 0; /*Establecer el relleno superior e inferior*/
transition: all 0.3s ease; /*Añadir transición para el efecto de hover*/
color: white; /*Texto en blanco*/
font-size: 36px; /*Aumentar el tamaño de fuente*/
}
.icon-bar a:hover {
background-color: #000; /*Agregar color de fondo al pasar el mouse sobre el elemento*/
}
.active {
background-color: #0457AA; /*Agregar color de fondo para el elemento seleccionado*/
}
Pruébalo »
Barra de navegación vertical
Ejemplo
.icon-bar {
width: 90px; /*Especificar ancho*/
background-color: #555; /*Establecer fondo*/
}
.icon-bar a {
display: block; /*Hacer que los enlaces aparezcan uno debajo del otro en lugar de uno al lado del otro*/
text-align: center; /*Texto centrado*/
padding: 16px; /*Establecer relleno*/
transition: all 0.3s ease; /*Añadir transición para el efecto de hover*/
color: white; /*Texto en blanco*/
font-size: 36px; /*Aumentar el tamaño de fuente*/
}
.icon-bar a:hover {
background-color: #000; /*Agregar color de fondo al pasar el mouse sobre el elemento*/
}
.active {
background-color: #0457AA; /*Agregar color de fondo para el elemento seleccionado*/
}
Pruébalo »