CSS Скрыть текст, но показать изображение?

Мне нужно что-то изменить, не касаясь кодов HTML.

Итак, у меня этот код в моем HTML

                        <span class="share"> 
                            <ul>
                                <li>Share &nbsp;&nbsp;</li>
                                <li class="twitter"><a href="#">twitter</a></li>
                                <li class="facebook"><a href="#">facebook</a></li>
                                <li class="delicious"><a href="#">delicious</a></li>
                                <li class="friendfeed"><a href="#">friendfeed</a></li>
                                <li class="addthis"><a href="#">share</a></li>
                                <div class="clear"></div>
                            </ul>
                        </span>

и это в CSS

            .twitter {background:url('../images/tt.png') no-repeat; width:10px; height:14px; }

Это прекрасно работает, но текст twitter отображается под логотипом twitter, я не хочу, чтобы эти тексты отображались в моем списке, я хочу заменить их изображениями в CSS.

Можно ли обойтись без касания кодов HTML?

Ответ 1

Сделайте текст прозрачным. Поскольку это ссылка, вы хотите использовать несколько селекторов, чтобы убедиться, что все случаи адресованы:

.twitter a, .twitter a:link, .twitter a:visited
{
    color: transparent;
}

Изменить: Этот другой параметр, в то время как более подробный, имеет преимущество сохранения границы фокуса (маленькие точки, которые появляются при выборе ссылки) по размеру и форме значка Twitter. Кроме того, текст не будет отображаться, если он выбран, скопирован и вставлен. Он становится невидимым и невыбираемым. Вот техника:

.twitter a {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 14px;
    padding-left: 10px;
}

Ответ 2

Вы можете использовать text-indent:

text-indent: -9999px; /* get rid of any text */

Ответ 3

используйте текстовый отступ с небольшой магией в нем:)

HTML:

           <span class="share"> 
                <ul>
                    <li>Share &nbsp;&nbsp;</li>
                    <li class="twitter"><a href="#" class="twitter">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="delicious"><a href="#">delicious</a></li>
                    <li class="friendfeed"><a href="#">friendfeed</a></li>
                    <li class="addthis"><a href="#">share</a></li>
                    <div class="clear"></div>
                </ul>
            </span>

CSS

a.twitter {
    background-image:url('../images/tt.png');
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
}

Итак, вы видите, что текст имеет отступ, но изображение все еще доступно для клика, потому что я поместил класс в ссылку Twitter;)

Ответ 4

Попробуйте сделать свой font-size : 0px; в своем css.

Ответ 5

Я, возможно, неправильно понял ваш вопрос. Но вы хотите скрыть текст. Я бы использовал jQuery, однако помните, что ваш <a> потеряет массу.

<script>
    $('.twitter a').html('');
</script>