CSS精灵和锚

我想使用一些图标作为链接，并且在每个图标下都有文本链接，但我似乎不知道怎么做。因此，每个图标和文本链接都可以工作。 链接到JSFIDLE:

有人能告诉我我的错误吗

提前谢谢

<ul class="i-icons">            
 <li class="i-icon-va tablet-grid-33 mobile-grid-50"><a href="#">Vehicle Accidents</a></li>
 <li class="i-icon-pi tablet-grid-33 mobile-grid-50"><a href="#">Personal Injury</a></li>           
</ul>

#homepage-header ul.i-icons {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

#homepage-header ul.i-icons li {
    /*text-indent: -9999em;*/
    display: inline-block;
    width: 140px;
    height: 140px;
    background-image: url('http://inspiredworx-labs.com/sites/injury-icons.png');
    background-repeat: no-repeat;
    position: relative;
    margin: 10px 10px 20px 10px;
}

    #homepage-header ul.i-icons li.i-icon-va {
        background-position: 0 -1px;
    }

    #homepage-header ul.i-icons li.i-icon-pi {
        background-position: -155px -1px;
    }   

#homepage-header ul.i-icons li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
    text-decoration: none;
}

#主页标题ul.i-图标{
列表样式类型：无；
填充：0；
保证金：0；
宽度：100%；
文本对齐：居中；
}
#主页标题ul.i-li{
/*文本缩进：-9999em*/
显示：内联块；
宽度：140px；
高度：140像素；
背景图像：url（'http://inspiredworx-labs.com/sites/injury-icons.png');
背景重复：无重复；
位置：相对位置；
保证金：10px 10px 20px 10px；
}
#主页标题ul.i-icon li.i-icon-va{
背景位置：0-1px；
}
#主页标题ul.i-icons li.i-icon-pi{
背景位置：-155px-1px；
}   
#主页标题ul.i-LIA{
显示：块；
宽度：100%；
身高：100%；
位置：相对位置；
颜色：#fff；
字体大小：14px；
字体大小：1.4rem；
文字装饰：无；
}

类似于

我只是简单地将

top

属性添加到

#主页标题ul.I-icons li a

，并更改了字体颜色，以便您可以阅读

---

更新：我更改了小提琴，使其下方的文字和图标可以单击，但下方的文字不可单击。由于列表锚标记具有样式，因此它会影响文本，因此唯一的选择是将文本保留在

li

内，但保留在

a

外。你可以看到。如果你想让文本可以点击，你可能需要在列表图标下面做一个单独的div，也许有更好的方法，但这是我能想到的最好的方法

你能说明你需要什么吗？你是说你希望文本位于图标下方而不是顶部？还是别的什么？你的问题不清楚如果我的问题不清楚，我道歉。我想把文字放在下面，差一点就搞定了。我也想到了，但图标是不可点击的这样做。现在是凌晨2点，我在那里，我会在早上找到一个解决方案，哈哈，山姆。你的帮助很好，谢谢你。我想文本是可点击的，所以我想我需要重新思考我的HTML，也许在那里的某个地方添加一个div或span。或者仅仅使用真实图像而不是css精灵背景图像？是的，我建议使用常规图像。当需要悬停效果时，精灵更有用，例如在图像上悬停时更改图像的颜色。通过sprites上的列表查看本文：我总是让人们参考本教程，因为它非常详细，可以引导您完成每一步，使之完美。不管怎样，我很高兴能帮上忙，祝你好运！