CSS Sprites and Anchors

Question

我想使用一些圖標作爲鏈接，並在每個鏈接下面都有文字鏈接，但我似乎無法弄清楚如何做到這一點。所以每個圖標和文本鏈接都可以工作 鏈接到jsfiddle：http://jsfiddle.net/huwrowlands/jvMfY/

有人可以顯示我的方式錯誤。

在此先感謝

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

Answer 1

喜歡的東西this？

我只是增加了一個top屬性#homepage-header ul.i-icons li a，改變字體顏色，所以你可以閱讀

更新：我改變了小提琴，從而使文本是下面和的圖標點擊，但是底下的文字不可點擊。由於您對列表定位標記具有樣式，因此它會影響文本，所以唯一的選擇是將文本保留在li之內，但不在a之外。你可以看到它here。如果你希望文字是可點擊的，你可能需要製作一個單獨的div來放置在列表圖標下方，這可能會有更好的方式，但這是我能想到的最好的方式。