我正在寻找一个解决方案，可以在Bootstrap 4中创建和输入像这样的内容：
我正在使用Font Awesome，以下是我使用的代码：
<div class="input-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<span>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
</div>
但我无法从输入中获取图像，请帮忙。 https://jsfiddle.net/5db2ho62/
这是解决方案。
span{
position: absolute;
margin-left: 5px;
height: 25px;
display: flex;
align-items: center;
}
input{
padding-left: 25px;
height: 20px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
<span>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>这是可用的 fiddle
.main {
width: 50%;
margin: 50px auto;
}
.form-group .form-control {
padding-left: 2.375rem;
}
.form-group .form-control-icon {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}<link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="main">
<div class="form-group">
<span class="fa fa-search form-control-icon"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>试一下！
right: 0; 将起作用。并记得删除左侧不需要的填充。由于它允许通过图标单击输入，因此应该位于非常顶部。 - Ap0st0l<div class="input-group">
<i class="fa fa-user-circle-o"></i>
<input type="text" class="form-control" placeholder="Enter Name Here" >
</div>
CSS：
input{
border:none;
background-color: transparent;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.fa-user-circle-o{
color: gray;
}
更新的 JSFiddle 链接： https://jsfiddle.net/5db2ho62/2/
这种方法似乎是最干净的。您不需要添加任何自定义CSS。您可以使用Bootstrap来完成以下所有操作：
$(document).ready(function() {
$('.input-focus').on('click', function() {
$(this).children('input').focus();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group input-focus">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
</div>
<input type="search" placeholder="Search" class="form-control border-left-0">
</div>查看Bootstrap 4文档，了解如何操作输入图标的位置和样式的更多细节：
https://getbootstrap.com/docs/4.0/components/input-group/
更新： 根据评论中对此答案的建议，我添加了一个小的jQuery代码片段来在搜索图标被点击时聚焦输入框。JavaScript代码片段和jQuery库脚本包含不是图标显示和正常工作的必要条件，但它们可以改善用户体验。
解决方法可能是在占位符中使用Unicode。这是所有Font Awesome Unicode的速查表http://fontawesome.io/cheatsheet/。
input {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder=" Username" />
</div>使用以下代码，无需CSS。
<div class="d-flex align-items-center small">
<i class="fa fa-search fa-fw text-muted position-absolute pl-3"></i>
<input type="text" class="form-control py-4" placeholder="Search..." style="padding-left: 38px;"/>
</div>
使用Bootstrap 4进行测试。
选取一个 form-control，并将 is-valid 添加到其类中。注意控件变为绿色，但更重要的是，注意控件右侧的勾号图标？这就是我们想要的！
示例：
.my-icon {
padding-right: calc(1.5em + .75rem);
background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-5">
<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
</div>
</div><!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 " crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js " integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="col-sm-4 input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-search"></i>
</div>
</div>
<input type="text" class="form-control">
</div>
</body><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
希望这能帮到你。
您不需要键入自定义CSS代码。在Bootstrap 5上运行良好。别忘了添加font-awesome。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
...
<div class="input-group">
<span class="input-group-text fa fa-user-circle-o form-control-icon"></span>
<input type="text" name="name" class="form-control">
</div>
span标签应该有input-group-addon类。然后使用CSS覆盖样式。确保span行在输入行上方。 - node_modules