rails 5 and font awesome icon inside an input

Question

I'm having a hard time to set an icon inside my input in my form_for in rails 5! i already tried many different ways to do it but nothing is working

<div class="form-group">
  <%= f.label :name %>
  <%= f.text_field :name,  class: "form-control" do %>
    <%= fa_stacked_icon "twitter", base: "square-o" %>
  <% end %>
</div>

I would like to know how can i do to set the icon inside my input thanks

Answer 1

You will need CSS to do it, here's how:

1. Go here and get the unicode value of the icon you want.

2. Add it as either value or placeholder attribute to your input using raw method (otherwise it will output the code).

3. Style your input with "font-family: 'FontAwesome';".

For example (using stack-overflow code ):

<div class="form-group">
  <%= f.label :name %>
  <%= f.text_field :name, class: "form-control", value: raw("&#xf16c;"), style: "font-family: 'FontAwesome';" %>
</div>

And you're good to go; check the snippet:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<input type="text"
       value="&#xf16c;"
       style="font-family: 'FontAwesome';"/>