如何将小图标保留在输入框中？

Question

这是我的CSS代码：

.form-input::before{
    content: "\f2c0";
    position: absolute;
    font-family: "FontAwesome";
    font-size: 15px;
    padding-top: 1.9%;
    padding-left: 0.3%;
}
.form-input:nth-child(2)::before{
    content: "\f023";
    padding-left: 0.4%;
}

这是我的jsp文件中的代码，用html编写：

<div class="container">
    <form action=<%=request.getContextPath() + "/Login"%> method="POST">
        <div class="form-input">
            <input type="text" name="user_id" placeholder="Enter Username">
        </div>
        <div class="form-input">
            <input type="password" name="user_password" placeholder="Enter Password">
        </div>
        <input type="submit" value="Login" class="btn-login">
    </form>
    <a href=<%=request.getContextPath() + "/join.jsp"%>>Sign up now</a>
</div>

当前效果是这样的： 但是，当我调整窗口大小时，图标就像这样：

Answer 1

最好将图标div作为每个输入的兄弟，并使用position：absolute并使用top＆amp; left定位他们。

<div class="container">
    <form action=<%=request.getContextPath() + "/Login"%> method="POST">
        <div class="form-input">
            <div class="icon_1></div>
            <input type="text" name="user_id" placeholder="Enter Username">
        </div>
        <div class="form-input">
            <div class="icon_2></div>
            <input type="password" name="user_password" placeholder="Enter Password">
        </div>
        <input type="submit" value="Login" class="btn-login">
    </form>
    <a href=<%=request.getContextPath() + "/join.jsp"%>>Sign up now</a>
</div>

然后确保表单输入类设置为position: absolute。 在icon_1和icon_2上设置position: absolute，并使用top和left进行定位。