html - 在 css 中为图标使用 sprite 表

Question

由于某种原因，我无法让它正常工作。

这是我要使用的图标表:

我的问题是，即使我尝试设置 <li> 的宽度和高度元素和 <a>元素我看不到 25x25px 图标，我只能看到尽可能多的背景被里面的文字覆盖 <a> (我当然打算摆脱它!)

你能告诉我我做错了什么吗？谢谢!

Here's a jsfiddle这显示了我的代码和问题。

或者你可以看看我下面的代码:

html:

<div id="connect">
                <h4>Stay Connected</h4>

                    <ul class="icons">
                    <li><a  class="blogger" href="#blogger">a</a></li>
                    <li><a class="linkdin" href="#linkd">b</a></li>
                    <li><a class="facebook"  href="#facebook">c</a></li>
                    <li><a class="twitter" href="#twit">d</a></li>
                   </ul>
            </div>

CSS:

#connect ul.icons{list-style: none;}
        #connect ul.icons li{
             width: 25px;
            height: 25px;
        }
        #connect ul.icons li a {
            width: 25px;
            height: 25px;
            background-color: red;
            background-image: url('../IMG/iconset.gif');
        }
            #connect li a.blogger{background-position:100px 0px; }
            #connect li a:hover.blogger{background-position:100px 25px;}
            #connect li a.linkdin{background-position:50px 0px;}
            #connect li a:hover.linkdin{background-position:50px 25px;}
            #connect li a.facebook{background-position:25px 0px;}
            #connect li a:hover.facebook{background-position:25px 25px;}
            #connect li a.twitter{background-position:75px 0px;}
            #connect li a:hover.twitter{background-position:75px 25px;}

Answer 1

您需要使 a 元素成为 display:block。