Rails simple form: Move font awesome icon next to input field

306 views Asked by At

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:

enter image description here

Any idea what I'm doing wrong?

0

There are 0 answers