html - 社交媒体按钮不起作用

Question

我似乎无法弄清楚这一点，据我所知，这一直是我链接到我的社交媒体按钮的方式，但这些链接不起作用。这是网址:http://fantasyaficionado.com/news/

<ul class="social">  

 <li class="facebook"> <a href="https://www.facebook.com/fantasyaficionado">facebook</a> </li>
 <li class="twitter"><a href="https://twitter.com/FanAficionado">twitter</a></li>
 <li class="google"> <a href="http://google.com">google+</a></li>

</ul><!--social-->

所有这些的 css 基本相同:

ul.social{
  float:right;
  li{display:inline-block;}
  margin-right:1%;
}

.twitter{
  text-indent:-9999px;
  background: url('images/mainsprite.png') no-repeat -99px -192px;
  width: 41px;
  height: 41px;
     @include breakpoint(tinyer) {
        background: url('images/mainsprite.png') no-repeat -90px -313px;
        width: 24px;
        height: 24px;
     }
    &:hover{
     cursor:pointer;
     background: url('images/mainsprite.png') no-repeat -99px -239px;
     width: 41px;
     height: 41px;
        @include breakpoint(tinyer) {
          background: url('images/mainsprite.png') no-repeat -90px -341px;
          width: 24px;
          height: 24px;
        }
    }
}

Answer 1

在你的 li.facebook 和其他 li 中删除你的 text-indent，并添加以下 css

li.facebook a {
    display: block;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}