Html 在 input 标签中放置一个字体很棒的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39959066/
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
Put a font-awesome icon inside an input tag
提问by DistribuzioneGaussiana
I'm trying to put a Font-awesome icon inside an input tag.
我正在尝试在输入标签中放置一个 Font-awesome 图标。
This is my HTMLcode:
这是我的HTML代码：
<div class="input-group">
<input class="form-control" type="password" placeholder="Password">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
</div>
But that icon is bigger than input box as you can see in this picture:
但是该图标比输入框大，如下图所示：
How can I fix the icon?
如何修复图标？
回答by Finrod
Bootstrap 3
引导程序 3
Checkout the Bootstrap examplesin the Font Awesome documentation:
查看Font Awesome 文档中的Bootstrap 示例：
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
It should work out of the box, so if you still have height differences, check that there is not other CSS stuff that override your input-group-addonheight
它应该是开箱即用的，因此如果您仍然存在高度差异，请检查是否有其他 CSS 内容覆盖了您的input-group-addon高度
Working JSFiddle: https://jsfiddle.net/vs0wpy80
工作 JSFiddle：https://jsfiddle.net/vs0wpy80
Bootstrap 4
引导程序 4
Bootstrap 4 introduced some new classes for input groups, we need to use input-group-prependand input-group-append:
Bootstrap 4为输入组引入了一些新类，我们需要使用input-group-prepend和input-group-append：
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
</div>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group mb-3">
<input class="form-control" type="text" placeholder="Email address">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
</div>
</div>
Working JSFiddle: https://jsfiddle.net/8do9v4dp/5/
工作 JSFiddle：https://jsfiddle.net/8do9v4dp/5/
回答by Alan Mroczek
input.form-control{
margin-top: 0;
}
In my case it helps
就我而言，它有帮助
回答by user10523399
With CSS only
仅使用 CSS
<div class="wrapper">
<input type="text" class="input">
<i class="icon" class="fas fa-some-icon"></i>
</div>
Wrap the input and the icon in a 2 columns grid with this column template: 1fr 0
使用此列模板将输入和图标包装在 2 列网格中：1fr 0
.wrapper {
display: grid;
grid-template-columns: 1fr 0;
}
Give the icon a relative position from the right:
给图标一个从右侧的相对位置：
.icon{
width: 40px;
position: relative;
right: 45px;
font-size: 35px;
line-height: 40px;
cursor: pointer
z-index: 1;
}
Give the input a nice padding on the margin:
给输入一个很好的边距填充：
.input{
padding-right: 57px;
}
The input will take 100% of the space in the grid and the icon will float atop.
输入将占据网格中 100% 的空间，并且图标将浮动在顶部。
Works well with responsive designs and you can click on the icon.
适用于响应式设计，您可以单击该图标。
