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

Twitter Значки Bootstrap довольно смертоносны здесь.

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

Вот что я нашел, что добавит значок на вход:

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

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

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

Знает ли кто-нибудь менее хакерский способ сделать простой_форм или добавить значок с загрузкой?

Обновление:

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

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

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

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

Ответ 1

Это связано с пробелами между отображаемыми элементами input и span. В этом случае разрыв строки.

Я недостаточно хорошо знаком с HAML, чтобы рассказать вам, как устранить пробелы, но эквивалентный ERB будет выглядеть примерно так:

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

Ответ 2

Я понял лучший способ сделать это, чтобы сохранить placeholder, label и другие параметры неповрежденными.

Для тех, кто все еще использует старый Bootstrap 2.3.x

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

Ключ использует f.input_field, чтобы удалить все обертки div.

UPDATE

Вы можете использовать другое решение, чтобы включить placeholder, но вы не можете удалить ярлык с помощью этого решения.

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