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 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.

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 %>