Create horizontal animated menus using fontawsome

I would like to have a menu horizontally but with the same effect as the link below
and also using the icons

thank you guys in advance

These are the lines you need to change:

.overlay { /* initial, i.e. not hovered values */
  bottom: 100%;
  right: 0;
  width: 100%;
  height: 0;

.container:hover .overlay { /* hovered values */
  bottom: 0;
  height: 100%;

The current initial values (i.e. not hovered) form a rectangle that is 100% wide and 0% tall. The hovered values cause the rectangle to resize to 100% tall. The line transition: .5s ease is what causes the animation between inital and hovered states.

What you need is an initial rectangle that’s 0% wide and 100% tall, with a hover state that resizes it to 100% wide.

As for Font Awesome, you haven’t explained how you actually want to use it, but I suggest you start with the documentation.

a Nav menu like but instead of its picture show the icon’s from font awsome using jQuery

That isn’t a nav menu.

Please post a link your code so far on Codepen or similar, then explain what’s not working and exactly how you want it to work.