Hola! en este tutorial te enseñare una manera sencilla de incluir íconos de redes sociales en la barra de navegación de tu página web 🔥.
Es muy sencillo de hacer 👌, solo tienes que seguir los siguientes pasos:
- PRIMERO: En nuestro archivo .html (específicamente en la etiqueta ) añadiremos una librería de íconos.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- SEGUNDO: Escribir el html para la barra de navegación, puede hacerse de muchas maneras pero yo emplearé esta forma:
<body>
<nav>
<div class="navegacion">
</div>
<div class="sociales">
<a href="#" class="fa fa-github"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
</nav>
</body>
Dividí la barra de navegación en dos secciones. Ahora solo nos concentraremos en la parte de los iconos de las redes sociales. Inicialmente la página estaría de esta forma 💀:
- TERCERO: Ahora emplearemos CSS 👨🎨 para agregarle estilos a nuestra barra de navegación.
a) body: quitamos los márgenes del body para poder pintar la totalidad de la barra de navegación.
b) nav: diplay-flex para que las secciones se coloquen horizontalmente, position-fixed para que la barra de navegación se quede estática mientras hacemos scroll en la página web y width-100% para que abarque la longitud total.
c) .sociales: display-flex para poder organizar los iconos de manera más sencilla.
<style>
body{
margin: 0;
background-color: blanchedalmond;
}
nav{
display: flex;
position: fixed;
background-color: white;
width: 100%;
}
.navegacion{
width: 80%;
}
.sociales{
width: 20%;
display: flex;
justify-content: space-around;
}
style>
Con lo cual, la barra de navegación nos queda así:
- CUARTO: Por último, agregaremos estilos 🎨 a los íconos.
a) font-size: nos permite controlar el tamaño del ícono.
b) text-align: ubicar el ícono en medio de su contenedor.
c) text-decoration: quitamos el subrayado que se tiene por defecto al usar la etiqueta a.
d) color: cambiar el color del ícono.
.fa{
font-size: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
color: black;
}
.fa:hover {
opacity: 0.7;
}
Finalmente nuestra barra de navegación nos quedaría de la siguiente forma 🤩💯:
Y eso fue todo con este tutorial, espero te haya sido de gran ayuda 😉🚀.
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
