ブートストラップ4フォントがすばらしい入力アイコン

Question

フォントの素晴らしいアイコンを入力フィールドに追加する方法を解明しようとしています。私は本当に好きなデザインを見つけたので、入力フィールドにアイコンを合わせる必要があります。これは次のようなものです： しかし、私のフォームはこのように見えますが、実際にそれらを追加する方法はわかりません。私は数多くの回答を探しましたが、私はここで答えを見つけることができれば幸いです。

これは、フォームのコードです。事前に

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 
<script src="https://use.fontawesome.com/f4737361cc.js"></script> 
 

 
<form class="" method="POST" action=""> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group"> 
 
     <i class="fa fa-user-o"></i> 
 
     <input id="email" type="email" class="form-control custom-input" name="email" value="" placeholder="Email adress" required autofocus style="border-radius: 30px;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}"> 
 
    
 
     <i class="fa fa-lock"></i>       
 
     <input id="password" type="password" class="form-control custom-input" name="password" placeholder="Wachtwoord" required style="border-radius: 30px;"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 
</form>

おかげで

Answer 1

あなたは.FORM制御する

form i.fa { 
 
    position: absolute; 
 
    top: 6px; 
 
    left: 20px; 
 
    color: blue; 
 
    font-size: 22px; 
 
    z-index: 9999; 
 
} 
 

 
.form-control { 
 
    position: relative; 
 
    padding-left: 45px !important; 
 

 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 
<script src="https://use.fontawesome.com/f4737361cc.js"></script> 
 

 
<form class="" method="POST" action=""> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group"> 
 
     <i class="fa fa-user-o"></i> 
 
     <input id="email" type="email" class="form-control custom-input" name="email" value="" placeholder="Email adress" required autofocus style="border-radius: 30px;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group {{ $errors->has('password') ? ' has-error' : '' }}"> 
 
    
 
     <i class="fa fa-lock"></i>       
 
     <input id="password" type="password" class="form-control custom-input" name="password" placeholder="Wachtwoord" required style="border-radius: 30px;"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 
</form>

に続い position:relativeを追加した.Faする position:absuloteを設定することができます