搜索栏文字因搜索图标而被覆盖

Question

我要将搜索图标放在搜索栏的左侧，如下所示：

但是，当我尝试这样做时，搜索栏文本将被图标覆盖，如下所示：

如何确保文本在图标之后开始？

Answer 1

将padding-left属性应用于像素数量适当的输入框。

.foo
{
    padding-left: 20px;
}

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