在<input />上使用fontawesome图标作为背景的问题

Question

正如标题所说，我想在我的<input>元素上添加font-awesome图标作为背景。由于某种原因，它不起作用。我的代码是：

HTML：

<input class="mod mod-inp inp-alr" placeholder="This is an alert"/>

CSS：

.mod-inp {
    position: relative;
}

.mod-inp:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 0;
    left: 10px;
}

Answer 1

输入和img等HTML元素被视为为空。它们中没有内容，因此它们不具有:before或:after属性，因为没有任何内容可以包装。

您可能会考虑在代码中使用<label>，如下所示：

<label class="mod-inp"><input type="text" /></label>

并将图标应用于标签。这样，单击标签/图标仍然会将焦点放在子输入元素上。