Icon in bootstrap 4 inside the input
here is the solution
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>here is the working fiddle
You don't need to have the icon inside the input- you can place it next to the input field, and remove the input field's border using CSS.
HTML:
<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;
}
Updated fiddle: https://jsfiddle.net/5db2ho62/2/
.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>Try it!