css - 如何在rails提交按钮中放置图标

Question

我正在使用 Bootstrap 并想在表单的提交按钮中放置一个图标。
这是代码:

<%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>", 
                                class: "button_green" %>

生成的 HTML:

<input type="submit" value="Submit for Approval &lt;i class='icon-share-alt icon-white'&gt;&lt;/i&gt;" name="commit" class="button_green">

我尝试将 raw 和 html_safe 添加到文本中，但似乎都不起作用。
我知道一种解决方案是让类成为其中已经带有图标的图像，但我想在不创建其他图像/css 的情况下执行此操作。有什么建议吗？

Answer 1

您可以使用 button_tag 代替:

<%= button_tag( :class => "button_green") do %>
  Submit for Approval <i class="icon-share-alt icon-white"></i>
<% end %>

这将创建一个 <button type="submit"></button>带有图标和文字的元素。我已经测试过并且有效。 button_tag 的默认操作是提交，所以如果您需要不同的操作(例如取消)，您可以使用 :type => "button"覆盖默认提交行为的选项。

编辑:对于 Bootstrap 3，图标类名称已更改，因此您可以放置​​

<span class="glyphicon-white glyphicon-share-alt white"></span>

注意，不再有白色图标的特殊类别。只需创建一个 css 类 .white然后放color: #fff; .简单的。您可以使用您喜欢的任何颜色或文本样式，因为图标现在是一种字体。

相关问题:Add Icon to Submit Button in Twitter Bootstrap 2 , 和 How do I change Bootstrap 3's glyphicons to white?