Question

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

我已经尝试了我在堆栈中找到的选项（使用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>

我也尝试在带边框的容器中添加该图标以实现效果：

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

和css：

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

但没有成功

感谢您的帮助。

Answer 1

在范围内添加图标和输入。然后，如果您愿意，可以在整个范围中添加边框，您可以在图标或输入框上添加边框。

＆＃13;

.fa-address-book-o {
border: solid;
border-color: red;
}

＆＃13;

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<span><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"/></span>

＆＃13;

Answer 2

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

    .wr{border:2px solid black;padding:12px;}

    <form>
        <diV class="wr">
      <label for="user"> <i class="fa fa-camera-retro">(icon_img)</i></label><input type="text" name="user" placeholder="Username"/>  </diV>
       <div class="wr">
       <label for="pass"> <i class="fa fa-futbol-o">(icon_img)</i></label><input type="password" name="password" placeholder="Password"/>   </div>
    </form>

将带边框的fontawesome图标添加到表单输入中

2 个答案: