Иконка в бутстрапе 4 внутри входа

Я ищу решение для создания и ввода, как это в начальной загрузке 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/

Ответы

Ответ 1

Вам не нужно иметь значок внутри ввода - вы можете поместить его рядом с полем ввода и удалить границу поля ввода с помощью 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/

Ответ 2

вот решение

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>

Ответ 3

Решением может быть использование юникода в качестве заполнителя. Вот шпаргалка для всех шрифтов удивительный 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>

Ответ 4

Этот метод кажется самым чистым. Вам не нужно добавлять какие-либо пользовательские 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>

Ответ 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>

Ответ 6

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

Ответ 7

Используйте следующий код без 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>

Ответ 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>

Ответ 9

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

смотри бутстрап из

Надеюсь, это поможет.

Ответ 10

Размещение значка внутри текстовой области не является хорошим решением для этого. Лучший способ - создать простой обходной путь. Итак, сначала мы создадим форму со значком перед полем ввода, как показано ниже:

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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'; return false;">

<div class="input-group">
    <i class="fa fa-user"></i>
    <input type="text" class="form-control" placeholder="Please enter your name" >
</div>