CSS属性"text-indent"不能与html span元素一起使用

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-indent不适用于inline元素.<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;
}