在窗体输入中添加带有边框的字体图标

Question

is there any way to achieve something like this: 有什么办法可以实现这样的事情：

I've tried options that I found here in stack (with using span) but even if i made it work it is impossible for me to do that white line on the right from icon, can someone help me? 我已经尝试过在堆栈中找到的选项（使用跨度），但是即使我成功了，我也无法通过图标右边的白线进行操作，有人可以帮助我吗？

My current code looks like that: 我当前的代码如下所示：

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

I've also tried adding that icon in container with borders to achieve effect: 我也尝试过在带有边框的容器中添加该图标以达到效果：

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

And css: 和CSS：

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

But no succes 但是没有成功

Thank's for any help. 谢谢你的帮助。

Answer 1

Add the icon and the input inside a span. 在跨度内添加图标和输入。 You can then add a border to the whole span if you want to our you can put a border on just the icon or input box. 然后，如果需要，您可以在整个范围内添加边框，可以仅在图标或输入框上添加边框。

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

 <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>

Answer 2

You can use Labels I thinks this is a good start. 您可以使用Labels，我认为这是一个好的开始。

  .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>

在窗体输入中添加带有边框的字体图标

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-03-24 12:32:39

解决方案2
1 2017-03-24 12:31:58

在窗体输入中添加带有边框的字体图标

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-03-24 12:32:39

解决方案2 1 2017-03-24 12:31:58

解决方案1
4 已采纳 2017-03-24 12:32:39

解决方案2
1 2017-03-24 12:31:58