Как добавить значок календаря внутри элемента ввода текста - PullRequest
Новая
       37

Как добавить значок календаря внутри элемента ввода текста

0 голосов
/ 03 мая 2020

Я хочу знать, как я могу ввести значок из шрифта удивительный внутри текстового поля в daterangepicker так: enter image description here

, потому что я только получаю это:

enter image description here

Это мой HTML код ниже: 

<div class="container content-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <i class = "fas fa-calendar"></i><input type="text" id="daterange">
                </div>

            </div>
        </div>

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Вы можете сделать что-то вроде этого: 

.icons i {
  position: absolute;
}

.fas {
  padding: 10px;
}

input {
  padding: 10px;
  text-align: left;
  margin-left: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container content-header">
  <div class="row">
    <div class="col-sm-12 icons">
      <i class="fas fa-calendar calendar"></i><input type="text" id="daterange" class="input-field">
    </div>
  </div>
</div>
0 голосов
/ 03 мая 2020

Вот пример, просто настройте его так, чтобы он соответствовал вашим требованиям: Codepen 

<div class="container content-header" style="margin-top: 200px;">
  <div class="row">
    <div class="col-sm-12">
       <div class="input-icons">
        <i class = "fa fa-calendar icon"></i>
        <input class="input-field text-center" type="text" id="daterange" placeholder="Some Placeholder" size="35">
      </div>
    </div>
  </div>
</div>

.input-icons i { 
    position: absolute;
} 

.input-icons { 
    width: 100%; 
    margin-bottom: 10px; 
} 

.icon { 
    padding: 15px;
} 

.input-field { 
    padding: 10px;
}

И имейте в виду, когда вы в следующий раз спросите за помощь в StackOverflow, чтобы предоставить как можно больше информации (код, информация о проекте, то, что вы уже пробовали, и т. д. c.). Поскольку вы опубликовали номер CSS, мы все предполагаем, что в вашем коде нет ничего, что могло бы изменить то, что работает для всех остальных.

...