html - CSS 用标签内的图像替换 文本

Question

有什么方法可以隐藏span里面的文字a href标记并用图像替换它？

这是我不想修改的 HTML 代码:

<div id="social" class="icons">
        <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
        <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
        <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
</div>

在 CSS 文件中，我试图隐藏 <span>Twitter</span>并用这样的图像替换它:

.icons .twitter span {
    display: none;
}
.icons .twitter a {
    text-decoration:none;
    background:url('images/i_twitter.png') no-repeat;
}

我的问题 code .

Answer 1

它没有出现是因为将 display:none 设置为跨度时，您的 anchor 没有大小。一种可能的解决方案是将图像设置为伪元素，如 :before

.icons .twitter span {
  display: none;
}
.icons .twitter:before {
  text-decoration:none;
  content: url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png');
}

<div id="social" class="icons">
  <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
  <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
  <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
</div>