1

我在 a 中有以下 html <div>：

<span class="footer-icons">
    <a href="#;" class="facebook" title="Facebook">Facebook</a>
    <a href="#;" class="twitter" title="Twitter">Twitter</a>
</span>

还有我的 CSS：

#footer .footer-icons {
    float: right;
    margin-right: 10px;
}
#footer .footer-icons {
    text-indent: -9999px;
}
#footer .footer-icons .facebook {
    background: url("../images/new/footer-icons.png");
}

这样做的问题text-indent是导致背景图像也移动。我将如何使它可以“转义文本”（例如，使用文本缩进：-9999px）并保持背景图像到位？

4

2 回答 2

2

这是工作小提琴：http: //jsfiddle.net/surendraVsingh/qdFNM/5/ （更新）

添加 display:inline-block 并为该 div 提供与图像相同的宽度和高度。

CSS

.footer-icons {
    margin-right: 10px;
}
.footer-icons {
    text-indent: -9999px;
}
.footer-icons .facebook {
    background: url("https://dl.dropbox.com/u/19982181/fab/fb.jpg") no-repeat left top ;
    width:20px; height:20px;
    display:inline-block;
}
.footer-icons .twitter {
    background: url("https://dl.dropbox.com/u/19982181/fab/tw.jpg") no-repeat left top ;
    display:inline-block;
    width:20px; height:20px;
}
于 2012-06-30T07:42:56.477 回答
1

这是另一种方法，使用<i>，这是Twitter 的 Bootstrap 文档为他们的图标建议的：

注意- 这是链接友好的。当然，A可以使用标签代替i. 但这也有效：

<div id="footer">
    <span class="footer-icons">
        <a href="#;" class="facebook" title="Facebook">
            <i class="facebook"></i>Facebook
        </a>
        <a href="#;" class="twitter" title="Twitter">
            <i class="twitter"></i>Twitter
        </a>
    </span>
</div>

在 上margin-right，由于 jsFiddle 的Result标签覆盖妨碍了我，我移动了它。

#footer .footer-icons {
    float: right;
    margin-right: 100px;
    overflow: auto;
}
.footer-icons a {
    font-size: 0;
}
.footer-icons i {
    font-family: Georgia;
    font-size: 35px;
    padding: 0 0 0 35px;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.footer-icons i.facebook {
    background-image: url(http://goo.gl/QrKCc);
}
.footer-icons i.twitter {
    background-image: url(http://goo.gl/QrKCc);
}

http://jsfiddle.net/userdude/qdFNM/10/

原始答案

<div id="footer">
    <span class="footer-icons">
        <i class="facebook"></i>
        <a href="#;" class="facebook" title="Facebook">Facebook</a>
        <i class="twitter"></i>
        <a href="#;" class="twitter" title="Twitter">Twitter</a>
    </span>
</div>

#footer .footer-icons {
    float: right;
    margin-right: 10px;
    overflow: auto;
}
.footer-icons a {
    display: none;
}
.footer-icons i {
    font-size: 35px;
    padding: 0 0 0 35px;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.footer-icons i.facebook {
    background-image: url(http://goo.gl/QrKCc);
}
.footer-icons i.twitter {
    background-image: url(http://goo.gl/QrKCc);
}

http://jsfiddle.net/userdude/qdFNM/4/

于 2012-06-30T08:08:37.883 回答