如何将图标放入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?

Answer 2

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

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