글꼴 멋진 아이콘 상단에서 하단까지 효과를 가져옵니다

Question

저는 부트 스트랩으로 작업하는 내 소셜 아이콘을위한 글꼴 AEWSOME을 사용하고 있습니다. 3.

나는

relinch10.dlr.de/" relinche.nofollow">

나는 사회 아이콘에 대한 목록을 가지고있다 :

<ul class="social-buttons">
    <li class="youtube"><a href="#" title="Follow us on Youtube"><i class="fa fa-youtube fa-lg"></i></a></li>
    <li class="twitter"><a href="#" title="Follow us on Twitter"><i class="fa fa-twitter fa-lg"></i></a></li>
    <li class="xing"><a href="#" title="Follow us on Xing"><i class="fa fa-xing fa-lg"></i></a></li>
    <li class="rss"><a href="#" title="Check out our RSS"><i class="fa fa-rss fa-lg"></i></a></li>
</ul>

.

내 CSS의 경우 다음과 같습니다.

.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;
}

.

나는 지난 몇 시간 동안 Google을 검색했으며, 나는 그들이 스프라이트 또는 그런 것과 같은 것을 사용하는 것만으로 만 찾을 수 있었다.나는 그것을하는 법을 정말로 모른다.호버링 될 때 교환 해야하는 아이콘을 어디에서 넣어야합니까? 나는 스프라이트로 그것을하는 방법을 알고 있습니다 - 거기에서 나는 위치를 사용합니다.그러나 여기에서 어떻게 사용합니까?나는 youtube 호버를 위해 다른 것을 시도했다. 그러나 그것은 큰 벌레처럼 보인다! 누군가가 나를 가르치거나 TUT을 어디에서 찾을 수 있는지 말해 주시겠습니까?좋은 것.

Answer 1

jsfiddle 에 여기를 빌드합니다.

지금 AWSOMEFONT 항목을 추가해야합니다.

나는 부모에게 overflow: hidden;를 추가하고, 호버 이벤트에서 margin: -x px 0 0 0로 단일 요소를 이동 시켰습니다.