Append/prepend bootstrap icons with simple_form

Question

Twitter Bootstrap icons are pretty deadly seen here.

Look at the bottom right hand corner of that section. See that email with an icon prepended? That is what I want to

Answer 1

It's due to whitespace between the rendered input and span elements. In this case, a line break.

I am not familiar enough with HAML to tell you how to eliminate the whitespace, but the equivalent ERB would go something like:

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>

Answer 2

I figured out a better way to do this, to keep placeholder, label, and other options intact.

For those that are still using old Bootstrap 2.3.x

<div class="input-prepend">
  <span class="add-on">@</span>
  <%= f.input_field :password, :required => true, :label=>false, :placeholder=>"Password" %>
</div>

The key is using f.input_field to remove all div wrappers.

UPDATE

You can use the other solution to include a placeholder, but you cannot remove the label using that solution.

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email, placeholder: "hello" %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>