Блог

Главная - Вопросы по программированию - Поместите значок с потрясающим шрифтом внутри тега ввода

Поместите значок с потрясающим шрифтом внутри тега ввода

#html #font-awesome

#HTML #шрифт-awesome

Вопрос:

Я пытаюсь поместить значок с потрясающим шрифтом внутри тега ввода.

Это мой HTML код:

 <div class="input-group">
        <input class="form-control" type="password" placeholder="Password">
        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
</div>

Но этот значок больше, чем поле ввода, как вы можете видеть на этом рисунке:

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

Как я могу исправить значок?

Комментарии:

1. Вы пытались установить <span>или <i> размер шрифта?

2. Нет, я не пробовал. Что я должен установить?

3. Добавьте класс в, а затем попробуйте поиграть с .test class font-size . Что-то вроде этого : .test {размер шрифта: 14 пикселей}

4. Добавление класса fa-lg , fa-2x , fa-3x , … в элемент <i> также делает это

Ответ №1:

Bootstrap 3

Проверьте примеры начальной загрузки в документации Font Awesome:

 <div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

Это должно работать из коробки, поэтому, если у вас все еще есть различия в высоте, убедитесь, что нет других CSS-элементов, которые переопределяют ваш input-group-addon рост

Рабочий JSFiddle: https://jsfiddle.net/vs0wpy80

Bootstrap 4

В Bootstrap 4 введены некоторые новые классы для групп ввода, нам нужно использовать input-group-prepend и input-group-append :

 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
  <input class="form-control" type="text" placeholder="Email address">
</div>

<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Email address">
  <div class="input-group-append">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
</div>

Рабочий JSFiddle: https://jsfiddle.net/8do9v4dp/5 /

Комментарии:

1. Если бы эти примеры сработали, я бы не опубликовал вопрос

2. К сожалению, похоже, что это решение больше не работает для bootstrap4.0

3. @piotao Я только что добавил пример с классами Bootstrap 4 😉

4. Этот пример прерывается, если в форме есть метка

Ответ №2:

 input.form-control{
    margin-top: 0;
}

В моем случае это помогает

Комментарии:

1. Спасибо. Я потратил много времени на эту проблему. Хороший совет. Это работает.

2. Это может сработать, но вы переопределяете Boostrap CSS, это, вероятно, вызовет у вас некоторые проблемы со стилем при других вводах…

3. Да, вы правы. Мы не можем использовать его прямо так, как я его опубликовал, потому что мы можем нарушить макет. Мы должны предоставить точный селектор для элемента, который мы переопределяем. Я только что опубликовал пример того, как мы можем это сделать, без селектора, потому что у меня не было никакой разметки.

Ответ №3:

Только с помощью CSS

 <div class="wrapper">
   <input type="text" class="input">
   <i class="icon" class="fas fa-some-icon"></i>
</div>

Оберните ввод и значок в сетку из 2 столбцов с помощью этого шаблона столбца: 1fr 0

 .wrapper {
    display: grid;
    grid-template-columns: 1fr 0;
}

Укажите значку относительное положение справа:

 .icon{
    width: 40px;
    position: relative;
    right: 45px;
    font-size: 35px;
    line-height: 40px;
    cursor: pointer
    z-index: 1;
}

Сделайте ввод приятным дополнением на полях:

 .input{
    padding-right: 57px;
}

Ввод займет 100% места в сетке, а значок будет плавать сверху.

Хорошо работает с адаптивным дизайном, и вы можете нажать на значок.