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。有什么建议么？

score 58 · Accepted Answer

您可以改用 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;. 简单的。您可以使用您喜欢的任何颜色或文本样式，因为图标现在是一种字体。

score 0 · Accepted Answer

.button_green {
   background-image:url(...your image path...);
   background-repeat:no-repeat;
   padding-left:30px;
}

您可能需要调整填充以匹配图标的大小。

2 回答 2