如何在我的输入文本框中放置fa fa图标？

Question

我正在尝试在我的angular 4项目的输入文本框中放置一个fa fa图标。 “我尝试了其他堆栈溢出答案，但不适合我” 我使用的编码如下：

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

输出就像这样(click here to see my output)。但我想在文本框中添加图标。Click here to see actual expected output

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

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

Answer 3

将position:absolute用于fa

＆＃13;

＆＃13;

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

.form-group {
    position: relative;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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. 方法

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