How to put fa fa icons inside my input text box?

Question

I am trying to put a fa fa icon inside the input text box in my Angular 4 project. I tried other Stack Overflow answers, but they did not work for me. The coding I used is as follows:

 <div class="form-group has-feedback">
<input class="form-control "  name="UserName"  type="text"   placeholder="username"><span class="fa fa-user form-control-feedback"></span>
 </div>
 <div class="form-group has-feedback">
 <input class="form-control "  name="PassWord"  type="password" placeholder="password"><span class="fa fa-lock form-control-feedback"></span>
 </div> 

The output comes like this:

But I want icons within text box:

Solution 1

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
<input style="position:relative;" class="form-control "  name="UserName"  type="text"   placeholder="username" >
<span style="position:absolute; right:8px;top:8px;" class="fa fa-user "></span>
 </div>
 <div class="form-group has-feedback">
 <input class="form-control " style="position:relative;"  name="PassWord"  type="password" placeholder="password"><span style="position:absolute; right:8px;top:60px;" class="fa fa-lock form-control-feedback"></span>
 </div>

Solution 2

  input[type=text]{
    width:100%;
    border:2px solid #aaa;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
  }
  
  input[type=text]:focus{
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
  }
  
  .inputWithIcon input[type=text]{
    padding-left:40px;
  }
  
  .inputWithIcon{
    position:relative;
  }
  
  .inputWithIcon i{
    position:absolute;
    left:0;
    top:8px;
    padding:9px 8px;
    color:#aaa;
    transition:.3s;
  }
  
  .inputWithIcon input[type=text]:focus + i{
    color:dodgerBlue;
  }
  
  .inputWithIcon.inputIconBg i{
    background-color:#aaa;
    color:#fff;
    padding:9px 4px;
    border-radius:4px 0 0 4px;
  }
  
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="inputWithIcon">
<input type="text">

  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i></div>
<div class="inputWithIcon">
<input type="text">

  <i class="fa fa-lock fa-lg fa-fw" aria-hidden="true"></i></div>

Comments

[Ben]

Sory I tried your one, its not working for me.

[Ben]

I tried same thing that u gave above. but not working. my bootstrap version is 4.1.0 and my fontawesome version also 4.7.0. The above one not working for me because of this version issue??? @Anuresh

[Athul Nath]

@Ben Nothing with the version. You only need css .

[Ben]

Hi I tried your RafiqulIslam's answer, its working for me. so I gave him tick already.. but once I remove ur css the positions slightly changed. So my one works with ur css with his coding, Sorry as I dont have 15 points, I cant able to give u up vote also. ITs not accepting my vote.Sory once again

[Ben]

Hi I tried ur one, at first it working for me, but after I removed @ anuresh's Css, the positions slightly changed. SO I use ur ans along with his CSS. Thank You.

[Ben]

Thank you for ur answer and sory once again

[Ben]

Thank you so much, but Sory I found my answer.

[Ben]

Thank you so much, but Sory I found my answer.

[Lord-shiv]

it's not responsive.