Question

我在<div>中有以下html：

<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导致背景图像也移动。我怎么能这样做，以便我可以逃避文本＆＃39; （例如，使用text-indent：-9999px）并保留背景图像？

Answer 1

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

添加显示：inline-block＆amp;给出宽度和宽度与图像相同的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;
}

Answer 2

以下是使用<i>的另一种方法，这是Twitter's Bootstrap documentation为其图标建议的内容：

注意 - 这是对链接友好的。当然，可以使用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/

使用文本缩进保持背景图像到位

2 个答案: