Css 如何在输入文本元素中添加日历图标

我想知道如何在daterangepicker中的文本框中输入字体awesome中的图标 就这样,

因为我只得到这个：

下面是我的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>

---

这是一个示例，只需进行定制，使其大小和排列符合您的需要：

---

下次在StackOverflow上寻求帮助时请记住，尽可能多地提供信息（代码、项目信息、您已经尝试过的内容等）。由于您没有发布CSS，我们都认为您的代码中没有任何内容会覆盖其他人的工作内容。

您可以这样做：

.icons i{
位置：绝对位置；
}
.fas{
填充：10px；
}
输入{
填充：10px；
文本对齐：左对齐；
左边距：10px；
}

---

我正在为您构建一个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;
}