Bootstrap 4字體真棒輸入圖標

我想弄清楚如何將字體真棒圖標添加到我的輸入字段。我發現了一個我非常喜歡的設計，並且需要在輸入字段中適合圖標。這是什麼樣子： Bootstrap 4字體真棒輸入圖標

但我的形式是這樣的，我真的不能弄清楚如何將它們添加在我看着衆多的答案，但他們沒有一如既往摸索出適合我，我希望我能在這裏找到答案。

無論如何，這是表單的代碼。

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

在此先感謝

來源

2017-10-28 Rainier laan

可以設置position:absulote到.fa再加入position:relative到.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>

來源

2017-10-28 17:23:29 M0ns1f

Bootstrap 4字體真棒輸入圖標

回答

相關問題