Html 如何将图标和输入元素分组

我正在努力实现以下目标：

• 在一行中创建3个输入元素
• 每一个都应该在它的左边有一个标志，完全居中
• 每一个都应该有一个跨越标志的边框底部

如下图所示：

但是，在我当前的代码中，图像不能居中，边框也不能跨越它们。这是我的密码：

输入{
边界：无；
宽度：250px；
背景色：#393d49；
边框底部：1px实心#767D93；
填充：10px；
}
表格img{
宽度：24px；
高度：24px；
}

正如建议的那样，我也会使用字体库。但是，如果你对这个想法不满意，这里是你可以不用的方法

form、.form行、输入{
背景色：#051024；
}
.输入图标、标签、输入{
显示：内联块；
}
形式{
填充：0.8em 1.2em；
}
.表格行{
填充：0.8em0；
垫底：0.2米；
}
.表格行：非（：最后一个子项）{
边框底部：实心35; 18273a 1px；/*只有最后一行有边框*/
}
.输入图标{
宽度：15px；
高度：15px；
利润率：0.10px；
}
标签{
最大宽度：4em；/*或您希望lebel的最大宽度*/
最小宽度：4em；/*相同*/
颜色：白色；
字号：100；
}
输入{
边界：无；
填充：0.8em 0.5em；
颜色：#6691c9；
字体大小：15px；
轮廓：无；/*铬合金上无发光边框*/
}

电子邮件
密码
使用者

我宁愿使用一些图标字体而不是图像作为示例