InicioCurso de Frontend Developer
Curso de Frontend Developer
1

¿Cómo hacer una barra de navegación con íconos de redes sociales de manera sencilla 😎✨?

Jose Manuel
jm_pacheco
6452

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.
<linkrel="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><divclass="navegacion"></div><divclass="sociales"><ahref="#"class="fa fa-github"></a><ahref="#"class="fa fa-instagram"></a><ahref="#"class="fa fa-youtube"></a><ahref="#"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 💀:
1.png

  • 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í:
2.png

  • 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 🤩💯:
3.png

Y eso fue todo con este tutorial, espero te haya sido de gran ayuda 😉🚀.

0
hace un año
Escribe tu comentario
+ 2

Entradas relacionadas

1

Tutorial de como colocar backgrounds utilizando ccs

La manera correcta de hacer esto es en una pestaña de ccs dentro del editor de codigo o abriendo la etiqueta &lt;Style&gt; &lt;/Style&gt; de
marioxcachazo
marioxcachazo
1

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga
carozamb
carozamb
9

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
4

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona
cpedrozamesa
cpedrozamesa