it-swarm.com.ru

Значок в начальной загрузке 4 внутри ввода

Я ищу решение для создания и ввода, как это в начальной загрузке 4  Desired target

Я использую шрифт, и это код, который я использую

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

11
Mohamed Sherif Noureldin

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

0
Shtut

вот решение

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>

вот рабочая скрипка

11
Syam Pillai

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

5
Rémy Testa

Этот метод кажется самым чистым. Вам не нужно добавлять какие-либо пользовательские CSS. Вы можете сделать следующее с Bootstrap:

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

См. Документацию по начальной загрузке для получения дополнительной информации о том, как вы можете управлять размещением и стилем значка ввода:

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

3
tnschmidt

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

Попытайся!

2
Kimprosh

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

1
nanthaa.ks