Bootstrap 4真棒字体输入图标 [英] Bootstrap 4 Font-awesome input icons

问题描述

我试图弄清楚如何在输入字段中添加超棒的图标.我找到了我真正喜欢的设计，并且需要在输入字段中放入图标.看起来是这样的:

I'm trying to figure out how to add font-awesome icons to my input fields. I found a design that I really like and I need to fit icons in the input field. This is what it looks like:

但是我的表单看起来像这样，而且我真的无法弄清楚如何添加它们.我寻找了很多答案，但是没有一个对我有帮助，我希望我能在这里找到答案.

But my form looks like this, And I can't really figure out how to add them in. I looked for numerous answers but none of them worked out for me as always I hope I can find the answer here.

无论如何，这是表格的代码.

Anyhow, This is the code for the form.

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

you can set the position:absulote to .fa then add position:relative to .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>

这篇关于Bootstrap 4真棒字体输入图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！