Question

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

我正在使用字体很棒，这是我使用的代码

volatile

但是我从输入中得到了图像请帮忙 https://jsfiddle.net/5db2ho62/

Answer 1

这是解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

这是工作fiddle

Answer 2

解决方案可能是在占位符中使用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 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

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

...
var db=require('./app_server/models/db');
...

Answer 6

您不需要在输入中放置图标 - 您可以将其放在输入字段旁边，并使用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 7

使用以下代码，无需CSS。

import pandas as pd
import wikipedia as wp
html = wp.page("List_of_video_games_considered_the_best").html().encode("UTF-8")
try: 
    df = pd.read_html(html)[1]  # Try 2nd table first as most pages contain contents table first
except IndexError:
    df = pd.read_html(html)[0]
print(df.to_string())

Answer 8

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

Answer 9

将图标放在文本区域内并不是一个很好的解决方案。最好的方法是创建一个简单的解决方法。首先，我们将在输入字段之前创建一个带有图标的表单，如下所示：

＆＃13;

input {
  border: none;
  background-color: white;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

＆＃13;

<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">
    <i class="fa fa-user"></i>
    <input type="text" class="form-control" placeholder="Please enter your name" >
</div>

＆＃13;

请参阅jsfiddle

接下来我们会做一些更改，以便它看起来像是input字段：

＆＃13;

input {
  border: none;
  background-color: transparent;
}

.fa-user {
  padding: 10px;
}

.input-group {
  border: 1px solid black;
  width: 250px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

＆＃13;

<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">
    <i class="fa fa-user"></i>
    <input type="text" class="form-control" placeholder="Please enter your name" >
</div>

＆＃13;

请参阅jsfiddle

希望这有帮助！

输入中的bootstrap 4中的图标

9 个答案: