Замена текстового изображения внутри ссылки

Question

Я пытаюсь заменить навигационный текст изображениями. Я применил изображения в качестве фона, но текстовый отступ: -9999px, похоже, не работает. Если я применю его к навигационной панели, содержащей ссылки, ссылки и изображения полностью исчезнут. Если я применю это к самим ссылкам, ничего не изменится. Эта замена делается на часто обновляемый плагин Wordpress, поэтому изменение кода HTML было бы непозволительным.

<nav class="webcomic-above">
<a href="#" class="webcomic-link webcomic1-link first-webcomic-link first-webcomic1-link">&laquo;</a>
<a href="#" class="webcomic-link webcomic1-link previous-webcomic-link previous-webcomic1-link" rel="prev">&lsaquo;</a>
<a href="#" class="webcomic-link webcomic1-link random-webcomic-link random-webcomic1-link">&infin;</a>
<a href="#" class="webcomic-link webcomic1-link next-webcomic-link next-webcomic1-link current-webcomic" rel="next">&rsaquo;</a>
<a href="#" class="webcomic-link webcomic1-link last-webcomic-link last-webcomic1-link current-webcomic">&raquo;</a>

.webcomic-above a.first-webcomic-link{
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/first-arrow.gif) 0 0 no-repeat;
padding:2px 12px; 
 }
.webcomic-above a.previous-webcomic-link{
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/previous-arrow.gif) 0 0 no-repeat;
padding:2px 17px;
}
.webcomic-above a.next-webcomic-link {
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/next-arrow.gif) 0 0 no-repeat;
padding:2px 17px;
}
.webcomic-above a.last-webcomic-link {
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/last-arrow.gif) 0 0 no-repeat;
padding:2px 12px;
}

http://jsfiddle.net/AHUn4/

Answer 1

Сделать a элементы inline-block, затем text-indent будет влиять на них.

ОБНОВЛЕННЫЙ ПРИМЕР ЗДЕСЬ

.webcomic-above a {
    text-indent: -9999px;
    display:inline-block;
}

Согласно документации, text-indent относится к block элементы. Якорные элементы inline по умолчанию. Делать их inline-block по сути это исправляет.

Answer 2

Ты можешь использовать: color:transparent; сделать текст, ну, прозрачным.