在选定的日期选择器表单CSS中设置图标

Question

我尝试将图标（真棒字体）设置为左侧选择的日期选择器表单，但没有出现。我该怎么做？

<div class="form-group ">
    <input 
    class="date-pick form-control " data-date-format="d/m/yyyy" type="text" 
    name="date1" placeholder="Select a date " autocomplete="OFF" 
    required="required" readonly="">
</div>

Answer 1

我这样解决。

html代码

    <div class="form-group dayselect bookingdates">
                            <input class="date-pick form-control bookingdate" 
    name="date" data-date-format="dd/mm/yyyy" autocomplete="OFF" value=" 
    {{\Carbon\Carbon::now()->addDay(1)->format('d/m/Y')}}"  type="text" readonly  
    required>
                        </div>

css代码

    .bookingdates {
    display: inline-block;
    position: relative
    }
    .bookingdates:before {
    font-family: 'Font Awesome\ 5 Free';    content: '\f073';
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: 900;
    font-size: 14px;
    color: #1a2b49;
    }
    .bookingdates input
    {
    padding-left: 35px;
    }