I have implemented a menu with a CSS3 hover animation called toTopFromBottom. Now, I want to replace the Font Awesome icons with Icomoon icons and apply the same animation effect:
HTML:
<div id="top-bar" class="top-bar">
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="social-icons social-icons-colored-hover">
<ul>
<li class="social-facebook"><a href="#"><i class="icon-mug"></i></a></li>
<li class="social-twitter"><a href="#"><i class="icon-rocket"></i></a></li>
<li class="social-google"><a href="#"><i class="icon-paint-format"></i></a></li>
<li class="social-vimeo"><a href="#"><i class="icon-pencil"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
#top-bar .social-icons {
float: right;
height: 100%;
overflow: hidden;
}
#top-bar .social-icons li,
#top-bar .social-icons li a {
float: left;
list-style: outside none none;
}
(code continued...)
However, when applying the CSS effect, it does not work correctly with Icomoon icons as intended.