[英]Bootstrap 4 Font-awesome input icons
我想弄清楚如何將字體很棒的圖標添加到我的輸入字段。 我找到了一個我非常喜歡的設計,我需要在輸入字段中放置圖標。 這是它的樣子:
但是我的表格看起來像這樣,我真的不知道如何添加它們。我尋找了很多答案,但沒有一個像往常一樣適合我,我希望我能在這里找到答案。
無論如何,這是表單的代碼。
<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:absulote
設置為 .fa 然后將position:relative
添加到 .form-control
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.