I'm using the bootstrap datepicker plugin for two input fields inside a simple form:
<div class="row">
<div class="col-lg-6">
<div class="form-group" id="datepickerContainer">
<i class="fas fa-calendar-alt"></i>
<%= f.label "From" %>
<%= f.input :from, :as => :string, label: false, :input_html => { :class => "datepicker", :id=>"datepickerContainer" } %>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" id="datepickerContainer">
<i class="fas fa-calendar-alt"></i>
<%= f.label "Until" %>
<%= f.input :until, :as => :string, label: false, :input_html => { :class => "datepicker" } %>
</div>
</div>
</div>
Currently as you can see above I have a font awesome icon next to each label... and I would like to move the awesome icon next to the each input like this:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</div>
So I'm doing this:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<%= f.input :from, :as => :string, label: false, :input_html => { :class => "datepicker", :id=>"datepickerContainer" } %>
</div>
But I'm getting this results:
Any idea what I'm doing wrong?