Як можна додати гліфікон до поля введення тексту? Наприклад, я хочу мати "icon-user" у введенні імені користувача, приблизно так:

Без завантажувальної програми:

Ми потрапимо до Bootstrap через секунду, але ось основні CSS-концепції, що граються, щоб зробити це самостійно. Як вказує хижа борода , ви можете зробити це за допомогою CSS, абсолютно розташувавши піктограму всередині вхідного елемента. Потім додайте набивання в обидві сторони, щоб текст не збігався з піктограмою.

Отже, для наступного HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Ви можете використовувати такі CSS, щоб вирівняти гліфи ліворуч та праворуч:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Демо в Plunker

Примітка . Це передбачає, що ви використовуєте гліфікони , але однаково добре працює з чудовим шрифтом .
Для FA просто замініть .glyphiconна.fa

З Bootstrap:

Як вказує буфер , це може бути досягнуто спочатку в Bootstrap, використовуючи стан перевірки з необов’язковими значками . Це робиться шляхом надання .form-groupелементу класу .has-feedbackта значка класу .form-control-feedback.

Найпростішим прикладом може бути щось подібне:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Плюси :

• Включає підтримку різних типів форм (основна, горизонтальна, вбудована)
• Включає підтримку різних розмірів управління (за замовчуванням, Малий, Великий)

Мінуси :

• Не включає підтримку лівих значків вирівнювання

Щоб подолати мінуси, я зібрав цей потяг-запит із змінами, щоб підтримати піктограми вирівнювання ліворуч. Оскільки це порівняно велика зміна, вона була відкладена до майбутнього випуску, але якщо вам потрібні ці функції сьогодні , ось простий посібник з реалізації:

Просто включіть ці зміни форми в css (також накреслені через прихований фрагмент стека внизу)
_{* МЕНШЕ : або, якщо ви будуєте через менше , ось форма змінюється на менше}

Потім все, що вам потрібно зробити, це включити клас .has-feedback-leftу будь-яку групу, яка має клас .has-feedback, щоб вирівняти піктограму зліва.

Оскільки існує багато можливих конфігурацій html для різних типів форм, різних розмірів керування, різних наборів значків та різної видимості ярликів, я створив тестову сторінку, яка показує правильний набір HTML для кожної перестановки разом із демонстрацією в реальному часі.

Ось демонстрація в Plunker

PS Пропозиція frizi в додаванні pointer-events: none;було додано в засобі завантаження

Не знайшли те, що шукали ? Спробуйте подібні запитання:

• Додайте піктограму завантажувача Twitter у поле введення
• Поставте значок пошуку поруч із завантажувальним текстовим полем

Додавання CSS для піктограм зворотного зв’язку з лівою вирівнюванням

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

Офіційний метод. Не потрібна спеціальна CSS:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Ця демонстрація заснована на прикладі в документах Bootstrap. Прокрутіть униз до "З необов’язковими значками" тут http://getbootstrap.com/css/#forms-control-validation

Ось лише альтернатива CSS. Я налаштував це для поля пошуку, щоб отримати ефект, схожий на Firefox (і сто інших додатків.)

Ось загадка .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Ось як я це зробив, використовуючи лише CSS v3.3.1 для завантаження за замовчуванням:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

І ось як це виглядає:

Цей "чіт" буде працювати з побічним ефектом, що клас гліфікону змінить шрифт для керування введенням.

Скрипка

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Якщо ви хочете позбутися побічного ефекту, ви можете видалити клас "glyphicon" і додати наступний CSS (Можливо, буде кращий спосіб стилізувати псевдоелемент-заповнювач, і я протестував лише на Chrome).

Скрипка

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Можливо, ще більш чисте рішення:

Скрипка

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Це можна зробити за допомогою класів з офіційної версії bootstrap 3.x, без будь-яких спеціальних css.

Використовуйте input-group-addonперед тегом введення, всередині input-groupпотім використовуйте будь-який із гліфіконів, ось код

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Ось вихід

Щоб додатково налаштувати його, додайте кілька рядків спеціального css до власного файлу custom.css (за потреби відрегулюйте прокладку)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Зробивши input-group-addonпрозорий фон і зробивши лівий градієнт вхідного тегу до нуля, вхід матиме безшовний вигляд. Ось індивідуальний вихід

Ось приклад jsbin

Це дозволить вирішити власні проблеми css із перекриттям міток, вирівнюванням під час використання input-lgта зосередженням уваги на вкладці.

Ось рішення, яке не завантажується, що забезпечує простоту розмітки, вставляючи зображення зображення гліфікону безпосередньо в CSS за допомогою кодування URI base64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Якщо ви використовуєте Fontawesome, ви можете зробити це:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Результат

Повний список унікоду можна знайти у повної посилання на піктограму «Шрифтовий дивовижний 4.6.3»

Ось ще один спосіб зробити це, розмістивши гліфікон за допомогою :beforeпсевдоелемента в CSS.

Робоча демонстрація в jsFiddle

Для цього HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Використовуйте цей CSS ( сумісні веб-переглядачі Bootstrap 3.x та Webkit )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Як сказав @Frizi, ми повинні додати pointer-events: none;так, щоб курсор не заважав фокусу введення. Усі інші правила CSS призначені для центрування та додавання належного інтервалу.

Результат:

Ви можете використовувати його Unicode HTML

Отже, щоб додати піктограму користувача, просто додайте до placeholderатрибуту або там, де ви цього хочете.

Ви можете перевірити цю шпаргалку .

Приклад:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Не забудьте встановити шрифт входу на Glyphicon, використовуючи наступний код:, font-family: 'Glyphicons Halflings', Arialде Arial є шрифтом звичайного тексту на вході.

У мене також є рішення щодо цього випадку з Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

На вході у мене є щось подібне:

Тестовано з 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>

Якщо вам пощастило, потрібні лише сучасні браузери: спробуйте перетворити css translate translate. Для цього не потрібні обгортки, і їх можна налаштувати так, щоб ви могли дозволити більше інтервалу для введення [type = number] для розміщення вхідного спінера або перемістити його зліва від ручки.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Ви повинні мати можливість це зробити за допомогою існуючих класів завантаження та невеликого користувацького стилю.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Редагувати На піктограму посилається через icon-userклас. Ця відповідь була написана під час завантаження версії 2. Посилання можна переглянути на наступній сторінці: http://getbootstrap.com/2.3.2/base-css.html#images