Html 在css中为图标使用精灵表

由于某种原因，我很难让它正常工作

这是我想要使用的图标表：

我的问题是，尽管我尝试设置了

项和显示我的代码和问题的

的宽度和高度

或者您可以查看下面的代码：

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>

#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;}

您需要使
a
元素
display:block
尝试以下操作：

我让你的
li成为
style
display:block

还可以在类之后而不是之前指定
：hover
样式

#connect li a.blogger:hover

您还可以使用
文本索引：-9999px
隐藏屏幕上的文本

#connect ul.icons li a {
    text-indent: -9999px;
    background-image: url('http://c3it.webuda.com/IMG/iconset.gif');
    width: 25px;
    height: 25px;
    display: block;
}

#connect li a.blogger{background-position:25px 0px; }
#connect li a.blogger:hover{background-position:25px 25px;}

#connect li a.linkdin{background-position:75px 0px;}
#connect li a.linkdin:hover{background-position:75px 25px;}

#connect li a.facebook{background-position:100px 0px;}
#connect li a.facebook:hover{background-position:100px 25px;}

#connect li a.twitter{background-position:50px 0px;}
#connect li a.twitter:hover{background-position:50px 25px;}

我已在此处更新了您的JSFIDLE：


您需要将display:block添加到锚定标记，并将悬停类添加到li。我还将文本居中，并添加了一个线条高度，使文本垂直居中。
为什么不试试这个：


我认为这是更好的方法。
对于css sprite技术的一般用法，a可以从以下网站强烈推荐这两篇文章：


第二部分使用sprite与javascript（jquery）相结合


我知道还有很多，但在我看来，这两本书确实值得一读