输入中的bootstrap 4中的图标

Question

我正在寻找一个在bootstrap 4中创建和输入这样的解决方案

我使用字体很棒,这是我使用的代码

<div class="input-group">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <span>
        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </span>
</div>

但我从输入中获取图像任何帮助请 https://jsfiddle.net/5db2ho62/

Answer 1

这是解决方案

span{
  position: absolute;
  margin-left: 5px;
  height: 25px;
  display: flex;
  align-items: center;
}
input{
  padding-left: 25px;
  height: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="input-group">
  <span>
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

这是工作小提琴

Answer 2

您不需要在输入中放置图标 - 您可以将其放置在输入字段旁边，并使用 CSS 移除输入字段的边框。

HTML：

<div class="input-group">
<i class="fa fa-user-circle-o"></i>
<input type="text" class="form-control" placeholder="Enter Name Here" >
</div>

CSS：

input{
  border:none;
  background-color: transparent;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.fa-user-circle-o{
  color: gray;
}

更新小提琴：https : //jsfiddle.net/5db2ho62/2/

Answer 3

这种方法似乎是最干净的。您不需要添加任何自定义CSS。您可以使用Bootstrap进行以下所有操作：

$(document).ready(function() {
  $('.input-focus').on('click', function() {
    $(this).children('input').focus();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="input-group input-focus">
  <div class="input-group-prepend">
    <span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
  </div>
  <input type="search" placeholder="Search" class="form-control border-left-0">
</div>

有关如何操作输入图标的放置和样式的更多详细信息，请参见bootstrap 4文档。

https://getbootstrap.com/docs/4.0/components/input-group/

更新：根据注释中对此答案的建议，我添加了一个小jQuery代码段，以在单击搜索图标时集中输入。不需要JavaScript片段和jQuery库脚本即可显示图标并使其正常工作，但它们确实对UX有所帮助。

Answer 4

解决方案可能是在占位符中使用unicode.这里所有字体的cheatsheet令人敬畏的unicode http://fontawesome.io/cheatsheet/

input {
  padding:10px;
  font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
  <label class="control-label">Username</label>
  <input type="text" class="form-control" placeholder="&#xf075; Username" />
</div>

Answer 5

.main {
    width: 50%;
    margin: 50px auto;
}

.form-group .form-control {
    padding-left: 2.375rem;
}

.form-group .form-control-icon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

<link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="main">
  <div class="form-group">
    <span class="fa fa-search form-control-icon"></span>
    <input type="text" class="form-control" placeholder="Search">
  </div>  
</div>

试试吧！

Answer 6

使用以下代码无需 CSS。

<div class="d-flex align-items-center small">
    <i class="fa fa-search fa-fw text-muted position-absolute pl-3"></i>
    <input type="text" class="form-control py-4" placeholder="Search..." style="padding-left: 38px;"/>
</div>

Answer 7

使用 Bootstrap 4 进行测试。

获取一个form-control, 并将其添加is-valid到其类中。请注意控件如何变成绿色，但更重要的是，请注意控件右侧的复选标记图标吗？这就是我们想要的！

例子：

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
    <input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>