Ruby on rails 3 用简单的表格附加/预加引导图标

推特引导图标非常致命

请看该部分的右下角。看到前面有图标的电子邮件了吗？这就是我想做的。我想让简单的形式和boostrap发挥得很好

以下是我发现的将图标前置到输入的内容：

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

是否有人知道一种不太老练的方法来制作简单的表单前置或添加带有引导的图标

更新： 下面的答案让我又看了一眼。HAML通常在任何地方都添加空格，但有一个

以下是原始HAML的更新，它删除了空白，不需要CSS破解：

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

---

稍大于（>）会产生很大的不同。输出HTML在输入和span之间没有换行符。

这是由于呈现的

输入和
span
元素之间存在空白。在本例中，是换行符

我对HAML不太熟悉，无法告诉您如何消除空白，但等效的ERB将类似于：

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

：追加do%>
我想出了一个更好的方法，保持
占位符、标签和其他选项完好无损

对于仍在使用旧引导程序2.3.x的用户

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

可能重复的而不是
%span（class=“add-on”）
您可以编写
%span.add-on
（与
图标信封
相同），对于prepend，我使用了%span.add-on>@\n=f.text\u字段：twitterHAML可以使用：ERB和缩进直接处理ERB。然而，你把我推向了正确的方向，让我明白了这一点。这是一个有效的解决方案（参见原始帖子的更新）。使用这种方法，你会丢失占位符和其他选项，这很悲哀：（是的，你知道如何在其中获得其他选项（占位符等）吗？
<div class="input-prepend">
  <span class="add-on">@</span>
  <%= f.input_field :password, :required => true, :label=>false, :placeholder=>"Password" %>
</div>

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