html - CSS プロパティ "text-indent" が HTML スパン要素で機能しない

Question

例えば：-

HTML コード

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

CSSコード

h1{
}

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

Answer 1

text-indentinline要素では機能しません。<span>デフォルトはinlineです。インライン ブロックとして機能するように変更する必要があります。

display:inline-block;

Answer 2

に設定font-sizeしてみてくださいzero：

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