使用simple_form附加/添加引导程序图标

Question

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; }

有人知道一个不那么hacky的方法来使simple_form prepend或附加一个带引导程序的图标？

更新:

下面的答案让我再看看它.HAML通常会在任何地方添加空格,但有一种解决方法

这是原始HAML的更新,它删除了空格并且不需要CSS hack:

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

比(>)更大的东西会产生重大影响.输出HTML在输入和跨度之间没有换行符.

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