Navbar solo con iconos

---

Como hacer?

Esta navbar es muy sencilla de hacer ya que lleva poco código.

El primero de todo es tenermos implantado el CDN de font-awesome

Como bien saben font-awesome es una página que nos proporciona iconos para nuestras páginas, además gratuitos

Para quien no la conoce dejo el enlace para que vos registres y disfruten con los iconos allí proporcionados

dicho esto, como estaba diciendo anteriormente el primero es tener el CDN de Fnot-awesome

...

Ejemplo del CDN

        <script src="https://kit.fontawesome.com/c2580d85e2.js" crossorigin="anonymous"></script>
    

El segundo paso para la creación de este navbar es crear el código HTML

Código HTML

Como pueden observar nel código nada más que una lista de los enlaces que necesitamos para nuestra web, pero en lugar de poner nombres, ponemos iconos

Ejemplo del HTML

<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> 
    

Los estilos

Los estilos es una parte muy importante para quien trabaja con la web, son ellos quien nos dan la imagen o el estilo que nos gusta ver.

Cuando ponemos un estilo a un elemento lo que estamos haciendo en la realidad estamos adaptando ese elemento para que sea más agradable a nuestros ojos

Si nos sabes mucho sobre estilos, visita el curso css que se encuentra en este blog

Para este navbar fueran utilizados los estilos que dejo a continuación, pero los puedes cambiar a tu gusto o hacer otros sin problema alguno

Ejemplo del CSS

        body {margin:0;}
    
        .icon-bar {
          width: 100%;
          background-color: #075a11;
          overflow: auto;
        }
        
        .icon-bar a {
          float: left;
          width: 20%;
          text-align: center;
          padding: 12px 0;
          transition: all 0.3s ease;
          color: rgb(212, 226, 17);
          font-size: 36px;
        }
        
        .icon-bar a:hover {
          background-color: #000;
        }
        
        .active {
          background-color: #e93e0a;
        }    
    

No te olvides de poner los estilos en la cabecera y dentro de las etiquetas <style></style>

Ir al índice