Добавить глиффит Bootstrap в поле ввода

Как добавить глификон в поле ввода текстового типа? Например, я хочу иметь "значок-пользователь" в имени пользователя, что-то вроде этого:

enter image description here

ОТВЕТЫ

Ответ 1

Без начальной загрузки:

Мы вернемся к 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; }

Демо в Плункер

css screenshot

Примечание: это предполагает, что вы используете глифы, но одинаково хорошо работает с font-awesome.
Для 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>

Плюсы:

  • Включает поддержку различных типов форм (Basic, Horizontal, Inline)
  • Включает поддержку различных размеров элемента управления (по умолчанию, маленький, большой)

Минусы:

  • Не включает поддержку выравнивания по левому краю значков

Чтобы преодолеть минусы, я собрал этот pull-запрос с изменениями для поддержки выровненных по левому краю значков. Поскольку это относительно большое изменение, оно было отложено до будущего выпуска, но если вам нужны эти функции сегодня, вот простое руководство по реализации:

Просто включите эти изменения формы в CSS (также встроенный через скрытый фрагмент стека внизу)
* LESS: в качестве альтернативы, если вы строите с помощью меньшего, здесь форма меняется на меньшее

Затем все, что вам нужно сделать, это включить класс .has-feedback-left в любую группу, в которой есть класс .has-feedback, чтобы выровнять значок по левому краю.

Поскольку существует множество возможных html-конфигураций для разных типов форм, разных размеров элементов управления, разных наборов значков и разной видимости надписей, я создал тестовую страницу, которая показывает правильный набор HTML для каждой перестановки вместе с живой демонстрацией.

Вот демо в Plunker

feedback screenshot

PS предложение frizi о добавлении pointer-events: none; был добавлен в начальную загрузку

Не нашли то, что искали? Попробуйте эти похожие вопросы:

Добавление 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;
}

Ответ 2

официальный метод. Пользовательский 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

enter image description here

Ответ 3

Здесь используется только 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;
}

Ответ 4

Вот как я это сделал, используя только загрузочный 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>

И вот как это выглядит:

enter image description here

Ответ 5

Этот "чит" будет работать с побочным эффектом, который класс глификона изменит шрифт для управления вводом.

Fiddle

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

Если вы хотите избавиться от побочного эффекта, вы можете удалить класс "глификон" и добавить следующий CSS (может быть, лучший способ создать псевдоним элемента placeholder, и я только тестировал его в Chrome).

Fiddle

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

Возможно, даже более чистое решение:

Fiddle

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

Ответ 6

Это можно сделать, используя классы из официальной версии 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>

Вот вывод

введите описание изображения здесь

Чтобы настроить его, добавьте еще пару строк custuom 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, связанные с таблицами, выравнивание при использовании ввода-lg и сосредоточиться на проблеме вкладок.

Ответ 7

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

Ответ 8

Если вы используете Fontawesome, вы можете сделать это:

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

Результат

введите описание изображения здесь

Полный список юникодов можно найти в полном значке значка Font Awesome 4.6.3

Ответ 9

Вот еще один способ сделать это, поместив глификон с помощью псевдоэлемента :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 предназначены для центрирования и добавления правильного интервала.

Результат:

screenshot

Ответ 10

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

Ответ 11

У меня также есть одно решение для этого случая с 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>

На входе у меня есть что-то вроде этого:  введите описание изображения здесь

Ответ 12

Вы можете использовать свой Unicode HTML

Итак, чтобы добавить значок пользователя, просто добавьте &#xe008; в атрибут 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">

Ответ 13

Вы должны иметь возможность сделать это с помощью существующих классов начальной загрузки и небольшого пользовательского стиля.

<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. Этот ответ был написан во время Bootstrap версии 2. Вы можете увидеть ссылку на следующей странице: http://getbootstrap.com/2.3.2/base-css.html#images

Ответ 14

Если вам посчастливилось использовать только современные браузеры, попробуйте css transform 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

Ответ 15

Протестировано с помощью 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="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'; return false;" 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>