1

内に次の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、背景画像も移動する原因となっていることです。「テキストをエスケープ」し (たとえば、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 に答える