7

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:

Click here to see my output

But I want icons within text box:

Click here to see actual expected output

halfer
  • 19,824
  • 17
  • 99
  • 186
Ben
  • 143
  • 1
  • 4
  • 12
  • sir I tried that one but not worked for me.. Also I want my Icons to be in placed in the end even the user types the user name. how to do that? @CornelC – Ben May 03 '18 at 09:29

4 Answers4

6

<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>
Rafiqul Islam
  • 1,636
  • 1
  • 12
  • 25
5

  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>
Ahmetovic Armin
  • 137
  • 4
0

Use position:absolute for fa

span.fa {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.form-group {
    position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<div class="container">
  <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> 
    
</div>
Athul Nath
  • 2,536
  • 1
  • 15
  • 27
  • 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 – Ben May 03 '18 at 09:31
  • @Ben Nothing with the version. You only need css . – Athul Nath May 03 '18 at 09:34
  • 1
    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 May 03 '18 at 09:40
  • Thank you for ur answer and sory once again – Ben May 03 '18 at 09:42
0

Add <i class="...">

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
  1. method

https://codepen.io/kruxor/pen/kpesI

Ahmetovic Armin
  • 137
  • 4