twitter-bootstrap 字段内的字体真棒图标输入组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35555261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
font awesome icon input group inside field
提问by jamesscaggs
I cannot get this icon to sit inside the field, I can only get it either above or below:
我不能让这个图标坐在场内，我只能在上面或下面找到它：
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<i class="fa fa-user">
</i>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
.form-group i{
color: #ccc;
float: right;
margin-right: 6px;
position: relative;
z-index: 2;
}
I have tried reading nearly every post on here but I am getting quite frustrated.
我已经尝试阅读这里的几乎所有帖子，但我感到非常沮丧。
回答by max
You can use input-group-addonclass like this:
您可以input-group-addon像这样使用类：
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<input type="text" class="form-control" id="inputFirstName">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
CODEPEN
代码笔
回答by Dzenis H.
I think what you were looking for was the class "input-group-prepend"This is from v 4.0.0I don't know how it was done in previous versions. I think with the addonclass like mentioned in previous answers, but this is what works for me:
我想你要找的是类"input-group-prepend"This is from v 4.0.0我不知道它是如何在以前的版本中完成的。我认为使用前面答案中提到的插件类，但这对我有用：
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
Here is a full formdemonstration with 3 inputfields:
这是一个form包含 3 个input字段的完整演示：
<form>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-pencil"></i></span>
</div>
<textarea class="form-control" placeholder="Message" rows="5"></textarea>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-outline-info btn-block btn-lg">
</form>
... and the final result is:
......最终结果是：
回答by Ajii
Your code is good, Bootstrap 4 does not expose this feature but it actually has class inside. All you need to do is just add the class "input-group-text" next to "input-group addon".
你的代码很好，Bootstrap 4 没有公开这个功能，但它实际上有内部类。您需要做的就是在“ input-group addon”旁边添加类“ input-group-text”。
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon input-group-text">
<i class="fa fa-user">
</i>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
回答by Adam Václav
Maybe this will help you.
也许这会帮助你。
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control" type="text" id="inputFirstName">
</div>
</div>
回答by Dawit Abate
Try putting the css link of font-awesome before the bootstrap link.
尝试将 font-awesome 的 css 链接放在 bootstrap 链接之前。
