web-dev-qa-db-ja.com

入力テキストボックス内にfafaアイコンを配置するにはどうすればよいですか？

Angular 4プロジェクトの入力テキストボックス内にfafaアイコンを配置しようとしています。他のStackOverflowの回答を試しましたが、うまくいきませんでした。使用したコーディングは次のとおりです。次のとおりです。

 <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

cssangularbootstrap-4font-awesome
3
Ben
<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>
2
Rafiqul Islam
  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>
2
Ahmetovic Armin

使用する 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>
0
Athul
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

0
Ahmetovic Armin