C# Razor页面登录表单在输入字段中添加图标

我正在.NetCore中开发一个Razor页面Web应用程序，我正在做这个登录页面，用户必须在其中插入电子邮件和密码。在输入字段中，我希望有2个图标，我尝试使用字体很棒的图标，但图标添加在字段外部，而不是内部。我还尝试添加一个图像，但效果相同。有没有办法在输入字段中添加图标

这是我的密码：

<div class="form-group">
    <label asp-for="Input.Email"></label>
    <input asp-for="Input.Email" class="form-control u-input-width">  
         <i class="fa fa-user"></i> 
    </input>
    <span asp-validation-for="Input.Email" class="text-danger"></span>
</div>

这就是我希望它看起来的样子：

#mainDiv{
最大宽度：500px；
保证金：自动；
}
.elementDiv i{
位置：绝对位置；
}
elementDiv先生{
宽度：100%；
边缘底部：10px；
}
.图标{
填充：10px；
最小宽度：40px；
}
.输入字段{
宽度：100%；
填充：10px；
文本对齐：居中；
}

输入元素演示中的图标

#mainDiv{
最大宽度：500px；
保证金：自动；
}
.elementDiv i{
位置：绝对位置；
}
elementDiv先生{
宽度：100%；
边缘底部：10px；
}
.图标{
填充：10px；
最小宽度：40px；
}
.输入字段{
宽度：100%；
填充：10px；
文本对齐：居中；
}

输入元素演示中的图标

如果您想将图标放在输入的右侧。下面是一个演示：

 <div class="form-group">
        <label asp-for="Input.Email"></label>
        <div class="inputContainer">
            <i class="fa fa-user fa icon"> </i>
            <input asp-for="Input.Email" class="form-control u-input-width" />
            <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>
 </div>
<style>
    .inputContainer {
        position: relative;
    }
    .icon {
        position: absolute;
        top: 10px;
        left: auto;
        right: 10px;
    }
</style>

.输入容器{
位置：相对位置；
}
.图标{
位置：绝对位置；
顶部：10px；
左：自动；
右：10px；
}

结果:

---

如果您想将图标放在输入的右侧。下面是一个演示：

 <div class="form-group">
        <label asp-for="Input.Email"></label>
        <div class="inputContainer">
            <i class="fa fa-user fa icon"> </i>
            <input asp-for="Input.Email" class="form-control u-input-width" />
            <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>
 </div>
<style>
    .inputContainer {
        position: relative;
    }
    .icon {
        position: absolute;
        top: 10px;
        left: auto;
        right: 10px;
    }
</style>

.输入容器{
位置：相对位置；
}
.图标{
位置：绝对位置；
顶部：10px；
左：自动；
右：10px；
}

结果:

---

您是否试图添加一个输入组，如：不太像这样，因为我需要我的图标位于输入字段内，而不是靠近它。我添加了一张新照片，以显示它的外观。您是否尝试添加一个输入组，如：不太像，因为我需要我的图标位于输入字段内，而不是靠近它。我添加了一张新照片来展示它的外观