CSS Icon Hover-in

/*1. Hide the content when not inside*/
.menu-footer-menu-container .menu-item-type-post_type,
.menu-footer-menu-container .menu-item-type-taxonomy{
  overflow: hidden;
}
/*2. Specify transition  */
.menu-footer-menu-container .menu-item-type-post_type a,
.menu-footer-menu-container .menu-item-type-taxonomy a{
  display: inline-block;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
/*3. HAve the :before content be the right size and position, and transition  */
.menu-footer-menu-container .menu-item-type-post_type a:before,
.menu-footer-menu-container .menu-item-type-taxonomy a:before{
  position: absolute;
  top: -100%;
  height: 100%;
  width: 100%;
  text-align: center;

  transition: top 0.3s;
  -moz-transition: top 0.3s;
  -webkit-transition: top 0.3s;

}
/*4. Specify transform action*/
.menu-footer-menu-container .menu-item-type-post_type:hover a,
.menu-footer-menu-container .menu-item-type-taxonomy:hover a {
  transform: translateY(100%);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);

}
/*5. Specify the particular Font Awesome icon to a specific menu item */
/* About footer menu icon*/
.menu-item-about a:before{
  font-family: FontAwesome;
  content: "\f129";
  font-size: 100%;
  top: -100%;
}