リンクを画像「ボタン」に変える

Question

リンクのテキストを削除し、CSSを使用して画像に置き換えたいとします。

マークアップ：

<a id="notifications" href="#">Notifications</a> 

のCss：

#notifications{ 
    background: url('http://icons.iconarchive.com/icons/treetog/i/16/Floppy-Small-icon.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    text-indent: -9999px; 
    overflow: hidden; 
    } 

JsFiddle。

私はあらゆることを試みましたが、テキストを取り除くことはできません。これはCSSで実行できないものですか？

Answer 1

minazが指摘したように、display: block問題を解決します。これらの他のプロパティもtext-indent財産を尊重するために、デフォルトでdisplay: inline要素である、あなたの<a>を取得します：

float: left|right; 
position: absolute; 
display: inline-block; 

text-indent上のW3の仕様では、理由を説明：

このプロパティは、のインデントを指定します ブロックコンテナ内のテキストの最初の行。より正確には、ブロックの最初の行ボックスに流れ込む最初のボックスの字下げを指定します。

Answer 2

あなたは、表示プロパティを追加する必要があります。

display:block;