Append/prepend bootstrap icons with simple_form
ruby-on-rails-3, simple-form, twitter-bootstrap
Solution
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 %>
Problem
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 do. I want to make simple_form and boostrap play nicely. Here's what I've found that will prepend the icon to the input: ``` = f.input :email, :wrapper => :append do = f.input_field :email <span class="add-on"><i class="icon-envelope"></i></span> ``` But it isn't flush (that could be fixed by changing offsets in CSS) and it's pretty ugly. For reference, here is the CSS fix (add it to your bootstrap_overrides.css.less file): ``` .input-prepend .add-on, .input-append input { float: left; } ``` Does someone know a less hacky way to make simple_form prepend or append an icon with bootstrap? Update: The answer below made me have another look at it. HAML usually adds whitespace everywhere, but there is a workaround Here is an update for the original HAML which removes the whitespaces and doesn't require the CSS hack: ``` = f.input :email, :wrapper => :append do = f.input_field :email %span.add-on> %i.icon-envelope ``` That little greater than (>) makes all the difference. The output HTML has no newlines between the input and the span.