Текст в строке поиска покрывается значком поиска

Question

Я хочу разместить значок поиска в левой части панели поиска, как показано ниже:

Но когда я пытаюсь это сделать, текст панели поиска скрывается под значком, как показано ниже:

Как мне убедиться, что текст начинается после иконки?

Answer 1

Применить свойство padding-left к полю ввода с соответствующим количеством пикселей.

.foo
{
    padding-left: 20px;
}

<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz">