Html 输入中引导程序 4 中的图标

Question

提问by Mohamed Sherif Noureldin

I am looking for a solution to create and input like this one in bootstrap 4

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

I am using font awesome and this is the code that I use

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

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

but i get the image out of the input Any help please https://jsfiddle.net/5db2ho62/

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

Answer 1

采纳答案by Shtut

You don't need to have the icon inside the input- you can place it next to the input field, and remove the input field's border using CSS.

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

HTML:

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:

CSS：

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

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

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

Updated fiddle: https://jsfiddle.net/5db2ho62/2/

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

Answer 2

回答by Syam Pillai

here is the solution

这是解决方案

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>

here is the working fiddle

这是工作小提琴

Answer 3

回答by tnschmidt

This method seems to be the cleanest. You do not need to add any custom CSS. You can do the following all with Bootstrap:

这种方法似乎是最干净的。您不需要添加任何自定义 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>

See the bootstrap 4 documentation for more details on how you can manipulate the placement and styling of the input icon:

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

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

UPDATE: I added a small jQuery snippet to focus the input when the search icon is clicked, per a suggestion to this answer in the comments. The JavaScript snippet and jQuery library script inclusion are not requirements for the icon to appear and work properly, but they do help with UX.

更新：根据评论中对此答案的建议，我添加了一个小的 jQuery 片段来在单击搜索图标时聚焦输入。JavaScript 片段和 jQuery 库脚本包含不是图标出现和正常工作的要求，但它们确实有助于用户体验。

Answer 4

回答by Kimprosh

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

Try it!

尝试一下！

Answer 5

回答by Rémy Testa

The solution is maybe to use unicode in placeholder. Here the cheatsheet for all font awesome unicode http://fontawesome.io/cheatsheet/

解决方案可能是在占位符中使用 unicode。这里是所有字体真棒 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 6

回答by Zeeshan Ahmad

Use the following code no CSS required.

使用以下代码不需要 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

回答by nanthaa.ks

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 " crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js " integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <div class="col-sm-4 input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <input type="text" class="form-control">
  </div>
</body>

Answer 8

回答by Igor K

Tested with Bootstrap 4.

使用 Bootstrap 4 测试。

Take a form-control, and add is-validto its class. Notice how the control turns green, but more importantly, notice the checkmark icon on the right of the control? This is what we want!

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

Example:

例子：

.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

回答by Igor K

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
.btn {
  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}
</style>
</head>
<body>

<form action="/action_page.php" style="max-width:500px;margin:auto">
  <h2>Register Form</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>

  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
  </div>

  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
  </div>

  <button type="submit" class="btn">Register</button>
</form>

</body>
</html>

see bootstrap From

看到引导从

Hope this will help.

希望这会有所帮助。

Answer 10

回答by Deathstorm

Putting the icon inside the text area isn't a nice solution to this. The best way is to create a simple workaround. So first we'll create a form with the icon before the input field like below:

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

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

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

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

See jsfiddle

见jsfiddle

Next up with some styling we'll make some changes so that it looks like it's one inputfield:

接下来是一些样式，我们将进行一些更改，使其看起来像一个input字段：

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

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

see jsfiddle

见jsfiddle

Hope this helps!

希望这可以帮助！

Html 输入中引导程序 4 中的图标

提问by Mohamed Sherif Noureldin

采纳答案by Shtut

回答by Syam Pillai

回答by tnschmidt

回答by Kimprosh

回答by Rémy Testa

回答by Zeeshan Ahmad

回答by nanthaa.ks

回答by Igor K

回答by Igor K

回答by Deathstorm

相关推荐

最近更新

标签

Html 输入中引导程序 4 中的图标

提问by Mohamed Sherif Noureldin

采纳答案by Shtut

回答by Syam Pillai

回答by tnschmidt

回答by Kimprosh

回答by Rémy Testa

回答by Zeeshan Ahmad

回答by nanthaa.ks

回答by Igor K

回答by Igor K

回答by Deathstorm

相关推荐

Html 使用javascript创建动态div

Html 角度，找不到图像（GET 404）

Html 如何在jsp中使用javascript动态创建下拉框？

Html 如何使用 CSS 网格布局在 CSS 中创建固定列？

相关推荐

最近更新

标签