CSS Sprites and Anchors - css

Question

I would like to use some icons as links as well as have text links beneath each one but I cannot seem to figure out how to do it. So each icon and text links work.
Link to jsfiddle: http://jsfiddle.net/huwrowlands/jvMfY/
Could some one show my the error of my ways.
Thanks in advance
<ul class="i-icons">
<li class="i-icon-va tablet-grid-33 mobile-grid-50">Vehicle Accidents</li>
<li class="i-icon-pi tablet-grid-33 mobile-grid-50">Personal Injury</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

Something like this?
I simply added a top property to #homepage-header ul.i-icons li a and changed the font color so you can read it
Update: I changed the fiddle so that the text is underneath and the icons are clickable, however the text underneath is not clickable. Because you have styling for the list anchor tag, it was affecting the text, so the only option was to keep the text inside the li but outside the a. You can see it here. If you want the text to be clickable, you might have to make a separate div to position underneath the list icons, there might be a better way but this was the best I could think of.