Свойство CSS "text-indent" не работает с элементом html span

Например: -

Код 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;
}

Ответ 1

text-indent не работает с элементами inline. <span> по умолчанию inline. Вам нужно изменить его, чтобы он работал как встроенный блок:

display:inline-block;

Ответ 2

Попробуйте установить font-size на zero:

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

Ответ 3

Моя проблема заключалась в выравнивании текста. Если вы измените режим выравнивания элемента или родительского элемента (ов), обернув его влево, вы должны указать отрицательный индекс для текстового отступа. В противном случае вы должны дать положительное значение.

.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

В противном случае

.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}