Twitter的引导图标是相当致命的在这里看到 。
再看那部分的右下角。 看到一个图标电子邮件前缀？ 这就是我想做的事情。 我要让simple_form和自举发挥很好。
下面是我发现，将预先准备的图标，输入：
= 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; }
是否有人知道一少哈克的方式，使simple_form前置或后置自举一个图标？
更新：
下面的回答让我再看一看吧。 HAML通常添加空格随处可见，但有一个解决方法
这里是原来的HAML其删除空格和不需要CSS破解的更新：
= f.input :email, :wrapper => :append do
= f.input_field :email
%span.add-on>
%i.icon-envelope
那个小大于号（>）使所有的差异。 输出HTML具有输入和跨度之间没有换行。
这是由于在渲染之间由空格input和span元素。 在这种情况下，一个换行符。
我都还不够熟悉HAML告诉你如何消除空白，但相当于雇员再培训局会去是这样的：
<%= f.input :email, :wrapper => :append do %>
<%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>
我想出了一个更好的方式来做到这一点，以保持placeholder ， label和其他选项不变。
对于那些还在使用旧引导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
您可以使用其他的解决方案，包括一个占位符，但使用的解决方案无法删除标签。
<%= f.input :email, :wrapper => :append do %>
<%= f.input_field :email, placeholder: "hello" %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>
