Insert glyphicon inside rails form_for text_field

Question

I've been trying to find a way to insert a glyphicon into a text_field for a rails form_for . Here is how I have the form setup in rails:

<div class="form-group">
  <%= f.text_field :first_name, :class => "form-control input-sm", :name => "first_name", placeholder: "First Name" %>
  <i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i>
</div>

So obviously this will treat the f.text_field and the i tags as separate elements. So the i will be placed below the f.text_field(input) and not in it. The question therefore stands, is there a way in rails to place an i or span tag of some sort, inside the f.text_field ? I know that I can position: relative the i element and place it appropriately on top of the input field that is created by the f.text_field .

Any answers or suggestions are greatly appreciated.

Answer 1

You can use a block to make this. Try something like this

<div class="form-group">
  <%= f.text_field :first_name, :class => "form-control input-sm", :name => "first_name", placeholder: "First Name" do %>
    <i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i>
  <% end %>
</div>

This kind of block syntax works for other helpers too like link_to, button_to, etc.

Answer 2

EDIT: Looks like I messed up my answer previously. Hope this helps.

You can convert the field to a do block like so:

<%= f.text_field :first_name do %>
  :name => "first_name",
  :placeholder => "First Name",
  :class => "form-control input-sm",
  :html => "<i class="glyphicon glyphicon-info-sign></i>"
<% end %>

I think the answer to this question provides good detail:

Rails, insert span tag in form_for label custom text