如何在输入字段中添加字体图标[[副本]

因此,通常可以使用类结构添加图标,例如:

fas fa-exclamation-circle

content: "\f06a";

类系统依赖于:before伪类,该类不适用于自动关闭的HTML元素,例如 或者 溴 标签

输入

在这种情况下,我要做的是将输入字段包装在一个容器中,在元素上添加一个FontAwesome元素作为:after。

<i class="fas fa-exclamation-circle"></i>

然后设置容器的样式,使其看起来像输入字段,同时从输入字段本身删除一些样式,例如背景色和边框。然后,您需要找出将图标一侧放在表单字段旁边的最佳方法。

字段HTML:

<form>
    <label for="name">Name</label>
    <div class="formField">
        <input class="valid" type="text" name="name" />
    </div>
</form>

样本样式

.formField{
    border-color: #28a745;
    padding-right: 30px;
    position: relative;
}
input.valid{
    background-color: transparent;
    border: 0;
    margin-right: 50px;
}
.formField:after{
    position: absolute;
    transform: translate(0,-50%);
    right: 0;
    top: 50%;
    font-family: "Font Awesome 5 Pro";
    content: "\f06a";
}

您可能需要调整一些样式以满足您的需要,但这应该会给您一些开始。

JSFiddle: https://jsfiddle.net/8jz9ngpu/