Добавление/добавление иконок начальной загрузки с помощью simple_form

Иконки Twitter Bootstrap довольно смертоносны можно увидеть здесь.

Посмотрите на нижний правый угол этого раздела. Видите это письмо со значком в начале? Это то, что я хочу сделать. Я хочу, чтобы simple_form и boostrap хорошо играли.

Вот что я обнаружил, что иконка добавляется к входным данным:

= f.input :email, :wrapper => :append do
  = f.input_field :email
  

Но она не ровная (это можно исправить, изменив смещения в CSS), и это довольно уродливо. Для справки, вот исправление CSS (добавьте его в свой файл bootstrap_overrides.css.less):

.input-prepend .add-on,
.input-append input {
  float: left; }

Кто-нибудь знает менее хитрый способ сделать так, чтобы simple_form добавлялся к значку в начале или в конце с помощью bootstrap?

Обновление:

Ответ ниже заставил меня еще раз взглянуть на него. HAML обычно везде добавляет пробелы, но есть обходной путь

Вот обновление исходного HAML, которое удаляет пробелы и не требует взлома CSS:

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

Немного больше, чем (>), делает все разница. Выходной HTML не имеет новых строк между вводом и диапазоном.