Html 在表单输入中添加带边框的图标

有没有办法实现这样的目标：

我已经尝试了在stack中找到的选项（使用span），但即使我成功了，我也不可能在图标右侧画出白线，有人能帮我吗

我当前的代码如下所示：

                    <form>
                    <input type="text" name="firstname" placeholder="Name">
                    <input type="text" name="firstname" placeholder="e-mail">
                    <input type="text" name="firstname" placeholder="website">
                </form>

但没有成功

谢谢您的帮助。

您可以使用标签 我认为这是一个好的开始

.wr{边框：2px纯黑色；填充：12px；}

（图标\u img）
（图标\u img）

您可以使用标签 我认为这是一个好的开始

.wr{边框：2px纯黑色；填充：12px；}

（图标\u img）
（图标\u img）

在范围内添加图标和输入。然后，如果需要，可以在整个跨度中添加边框，也可以在图标或输入框上添加边框

.fa-address-book-o{
边框：实心；
边框颜色：红色；
}

---

在范围内添加图标和输入。然后，如果需要，可以在整个跨度中添加边框，也可以在图标或输入框上添加边框

.fa-address-book-o{
边框：实心；
边框颜色：红色；
}

您应该向我们展示您的代码，以便我们查看。请检查此答案并与边框一起使用。希望如此helps@Robert更新我的post@maiky_forrester但是，如果我将图标添加到placehorder，当我开始在那里输入时，它将消失，我希望它一直出现。您应该向我们显示您的代码，以便我们可以查看它。检查此答案并使用边框。希望如此helps@Robert更新我的post@maiky_forrester但如果我将图标添加到placehorder，当我开始在那里输入时，它将消失，我希望它一直出现

<form>
                    <span class="form_frame"><i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    </span>
                    <input type="text" name="firstname" placeholder="Name">

.form_frame {
height: 60px;
border-width: 1px solid;
border-color: white;
width: 100%;
    background-color: #2b2b2b;