Как добавить глификон в поле ввода типа текста? Например, я хочу иметь 'icon-user' при вводе имени пользователя, что-то вроде этого:
css
twitter-bootstrap
glyphicons
doovers
источник
источник
Ответы:
Без начальной загрузки:
Мы вернемся к Bootstrap через секунду, но вот основные принципы CSS в игре, чтобы сделать это самостоятельно. Как указывает хищная борода , вы можете сделать это с помощью CSS, просто разместив значок внутри элемента ввода. Затем добавьте отступы с любой стороны, чтобы текст не перекрывался со значком.
Итак, для следующего HTML:
Вы можете использовать следующий CSS для выравнивания символов слева и справа:
Демо в Плункер
С Bootstrap:
Как указывает буфер , это может быть выполнено непосредственно в Bootstrap с помощью состояний проверки с необязательными значками . Это делается путем присвоения
.form-group
элементу класса.has-feedback
и значку класса.form-control-feedback
.Простейшим примером будет что-то вроде этого:
Плюсы :
Минусы :
Чтобы преодолеть минусы, я собрал этот pull-запрос с изменениями для поддержки выровненных по левому краю значков. Поскольку это относительно большое изменение, оно было отложено до будущего выпуска, но если вам нужны эти функции сегодня , вот простое руководство по реализации:
Просто включите эти изменения формы в css (также встроенный через скрытый фрагмент стека внизу)
* LESS : в качестве альтернативы, если вы строите с помощью меньшего , вот форма меняется в меньшем
Затем все, что вам нужно сделать, это включить класс
.has-feedback-left
в любую группу, которая имеет класс.has-feedback
, чтобы выровнять значок по левому краю.Поскольку существует множество возможных html-конфигураций для разных типов форм, разных размеров элементов управления, разных наборов значков и разной видимости надписей, я создал тестовую страницу, которая показывает правильный набор HTML для каждой перестановки вместе с живой демонстрацией.
Вот демо в Плункер
Не нашли то, что искали ? Попробуйте эти похожие вопросы:
Добавление CSS для значков обратной выравнивания по левому краю
Показать фрагмент кода
источник
.focusedInput
Класс определяется после того, как.input-group-addon
так , когда таблицы стилей Cascade вниз, последние стили должны иметь приоритет. Можете ли вы описать сценарий лучше, что привело к возникновению проблемы?<i class="icon-user"></i>
на<i class="fa fa-user"></i>
. Каждый раз, когда вы думаете об обновлении внешних библиотек, обязательно прочитайте примечания к выпуску и новую документацию, чтобы определить, совместимо ли ваше приложение или его нужно обновить.Официальный метод. Пользовательский CSS не требуется:
ДЕМО: http://jsfiddle.net/LS2Ek/1/
Эта демонстрация основана на примере из документации по Bootstrap. Прокрутите вниз до «С дополнительными значками» здесь http://getbootstrap.com/css/#forms-control-validation
источник
{left:0}
к классу глификонов должно позаботиться о выравнивании по левому краю. jsfiddle.net/LS2Ek/30 . Мне нравится твой набросок + box-shadow. Выглядит аккуратно!left:0
больше не определяется начало ввода. Также вам нужно будет добавить отступ слева от ввода и удалить его справа. Тем не менее, очень хорошее и чистое решение. Я думаю, что идентификация слева от ввода - это сложная часть, гдеposition:relative
пригодится обертка с .Вот альтернатива только для CSS. Я настроил это для поля поиска, чтобы получить эффект, похожий на Firefox (и сотню других приложений).
Вот скрипка .
HTML
CSS
источник
Вот как я это сделал, используя только стандартный загрузчик CSS v3.3.1:
И вот как это выглядит:
источник
Этот «чит» будет работать с побочным эффектом того, что класс glyphicon изменит шрифт для элемента управления вводом.
скрипка
Если вы хотите избавиться от побочного эффекта, вы можете удалить класс «glyphicon» и добавить следующий CSS-код (возможно, есть лучший способ стилизовать псевдоэлемент заполнителя, и я тестировал его только в Chrome).
скрипка
Возможно, даже более чистое решение:
скрипка
CSS
HTML
источник
Это можно сделать с помощью классов из официальной версии bootstrap 3.x, без каких-либо пользовательских CSS.
Используйте
input-group-addon
перед входным тегом, аinput-group
затем используйте любой из глифов, вот кодВот вывод
Для дальнейшей настройки добавьте пару строк пользовательского CSS в свой собственный файл custom.css (при необходимости измените отступы)
Делая фон
input-group-addon
прозрачным и устанавливая левый градиент входного тега в ноль, вход будет иметь плавный вид. Вот настроенный выводВот пример jsbin
Это решит пользовательские проблемы css, связанные с наложением меток, выравниванием при использовании
input-lg
и сосредоточением на проблеме с вкладками.источник
Вот решение, не основанное на начальной загрузке, которое упрощает разметку, встраивая представление изображения глифика прямо в CSS с использованием URI-кодирования base64.
источник
Если вы используете Fontawesome, вы можете сделать это:
результат
Полный список Unicode можно найти в справочнике The Complete Font Awesome 4.6.3.
источник
источник
Вот еще один способ сделать это, поместив глифик с помощью псевдоэлемента
:before
в CSS.Рабочая демонстрация в jsFiddle
Для этого HTML:
Используйте этот CSS ( совместимы с Bootstrap 3.x и браузерами на основе Webkit )
Как сказал @Frizi, мы должны добавить,
pointer-events: none;
чтобы курсор не мешал фокусировке ввода. Все остальные правила CSS предназначены для центрирования и добавления правильного расстояния.Результат:
источник
Вы можете использовать его Unicode HTML
Таким образом, чтобы добавить значок пользователя, просто добавьте

кplaceholder
атрибуту, или где вы хотите.Вы можете проверить этот шпаргалку .
Пример:
источник
У меня также есть одно решение для этого случая с Bootstrap 3.3.5:
На входе у меня есть что-то вроде этого:
источник
Протестировано с помощью Bootstrap 4.
Возьми
form-control
и добавьis-valid
в свой класс. Обратите внимание, как элемент управления становится зеленым, но, что более важно, обратите внимание на значок галочки справа от элемента управления? Это то, что мы хотим!Пример:
источник
Если вам повезло, что вам нужны только современные браузеры: попробуйте css transform translate. Это не требует оберток и может быть настроено так, чтобы вы могли увеличить интервал для ввода [type = number] для размещения входного счетчика или переместить его слева от ручки.
http://codepen.io/anon/pen/RPRmNq?editors=110
источник
Вы должны быть в состоянии сделать это с существующими классами начальной загрузки и небольшим пользовательским стилем.
Редактировать Значок ссылается через
icon-user
класс. Этот ответ был написан во время Bootstrap версии 2. Ссылку можно найти на следующей странице: http://getbootstrap.com/2.3.2/base-css.html#imagesисточник