이미지 "button"으로 링크 전환

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

이 display: block 문제가 해결됩니다.

이

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

text-indent에 W3 사양이 이유를 설명 :이 속성의 들여 쓰기를 지정

이 다른 속성도 기본적으로 display: inline 요소는 당신의 <a>을 얻을 것이라고 text-indent 속성을 존중 첫 번째 줄은 블록 컨테이너입니다. 보다 정확하게는 블록의 첫 번째 줄 상자로 흘러 들어가는 첫 번째 상자의 들여 쓰기를 지정합니다.

Answer 2

당신은 디스플레이 속성을 추가해야합니다 minaz는 지적

display:block;