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!