CSS property "text-indent" not working with html span element

Question

For example:-

HTML Code

<div>      <h1><span class="title-icon">icon</span> Hello India!</h1> </div> 

CSS Code

h1{ }  h1 span{     background: url("../images/icon.png")     text-indent: -9999px;     width:24px;     height:24px;     margin-right:1em; } 

Answer 1

text-indent doesn't work on inline elements. <span> defaults to being inline. You need to change it so it works as an inline block:

display:inline-block; 

Answer 2

Try setting font-size to zero:

h1 span {     background: url("../images/icon.png")     font-size: 0;     width: 24px;     height: 24px;     margin-right: 1em; }