在css中使用精灵表格中的图标

Question

我出于某种原因无法使用它.

继承人我想要使用的图标表:

我的问题是,即使我已经尝试设置<li>项目和<a>项目的宽度和高度,我看不到25x25px图标,我只能看到内部文本覆盖的背景<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.