CSS画像を表示しますが、画像を表示しますか？

Question

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コードに触れることなく行うことはできますか？

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

Answer 2

あなたはtext-indentを使用することができます。

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

Answer 3

私はおそらくあなたの質問が間違っていました。しかし、あなたはテキストを隠したいと思う。私はあなたの<a>が質量を失うことを覚えていますが、jQueryを使用します。

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

その中にちょっとした魔法で

Answer 4

使用テキストインデント:)

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

ですから、テキストを参照してくださいインデントされていますが、まだ画像はstilです私はtwitterリンクにクラスを入れたのでクリック可能です。）

Answer 5

あなたのCSSにあなたのfont-size : 0px;を作ってみてください。