title: Font Awesome icon hover effect from top to bottom
body: <p>I'm using Font Aewsome for my social icons, working with Bootstrap 3. </p>
  
  <p>I want a hover effect like this one on the bottom: <a href="http://mex10.dlr.de/" rel="nofollow">example</a></p>
  
  <p>I have a list for my social icons : </p>
  
  <pre><code>&lt;ul class="social-buttons"&gt;
      &lt;li class="youtube"&gt;&lt;a href="#" title="Follow us on Youtube"&gt;&lt;i class="fa fa-youtube fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="twitter"&gt;&lt;a href="#" title="Follow us on Twitter"&gt;&lt;i class="fa fa-twitter fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="xing"&gt;&lt;a href="#" title="Follow us on Xing"&gt;&lt;i class="fa fa-xing fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="rss"&gt;&lt;a href="#" title="Check out our RSS"&gt;&lt;i class="fa fa-rss fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>For my CSS i have this: </p>
  
  <pre><code>.social-buttons {
    position: absolute;
    left: 70%;
    top: 6px;
  }
  
  .social-buttons li {
    list-style-type: none;
    float: left;
    margin: 9px 9px 9px 9px;
    position: relative;
  }
  
  .social-buttons li a {
    padding: 2px 2px 2px 2px;
    display: block;
  }
  
  .social-buttons-footer {
    position: relative;
    left: -49px;
  }
  
  .social-buttons-footer li {
    list-style-type: none;
    float: left;
    margin: 8px 8px 8px 8px;
  }
  
  .social-buttons-footer li a {
    padding: 2px 2px 2px 2px;
    display: block;
  }
  
  .fa-youtube, .fa-twitter, .fa-xing, .fa-rss {
    color: #000000;
  }
  .fa-lg:hover{
    color: #ffffff;
  }
  
  .fa-2x{
    color: #000000;
  }
  .fa-2x:hover{
    color: #ffffff;
  }
  
  
  // Hover Effect ---------------------------------------------------------------------------------------------------------------------------------------------
  .youtube a:hover{
    background-color: #db2c2c;
    -webkit-animation: toBottomFromTop 0.3s;
    -moz-animation: toBottomFromTop 0.3s;
    animation: toBottomFromTop 0.3s;
    color: #ffffff;
  }
  
  .twitter a:hover{
    background-color: #83d0f5;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
  }
  
  .xing a:hover{
    background-color: #a2d123;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
  }
  
  .rss a:hover{
    background-color: #fe9c01;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
  }
  </code></pre>
  
  <p>I have searched google the last few hours and i could only find examples where they use sprites or anything like that. I don't really know how to do it. Where should i put the icon that should be exchanged when hovered ?
  I know how to do it with sprites - there i use the position. But how do i use it here? I tried something else for the youtube hover: but that looks like a big bug! 
  Could someone teach me or tell me where to find a tut? would be nice. </p>