html - 如何让输入框的小图标保持不变？

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 和 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 定位它们。