在 <input> 上使用 fontawesome 图标作为背景时出现问题

Question

如标题所述，我希望在我的 <input> 元素上使用超棒的字体图标作为背景。由于某种原因，它不起作用。我的代码是：

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

HTML 元素，如 input 和 img 被认为是 empty。它们中没有内容，因此它们不能具有 :before 或 :after 属性，因为没有任何内容可包装。

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

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

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

在 <input> 上使用 fontawesome 图标作为背景时出现问题

Problems with using fontawesome icons as background on <input>

html

css

icons

font-awesome