Icon in bootstrap 4 inside the input

Question

I am looking for a solution to create and input like this one in bootstrap 4

I am using font awesome and this is the code that I use

<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> 

but i get the image out of the input Any help please https://jsfiddle.net/5db2ho62/

Answer 1

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

Answer 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!