如何将图标放入rails提交按钮

I am using Bootstrap and want to put an icon in the submit button for a form.
here is the code:

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

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

Generated HTML:

生成的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">

I tried adding both raw and html_safe to the text but neither one seemed to work.
I know one solution would be to have the class be an image with the icon in it already but I would like to do this without creating additional images/css. any suggestions?

我尝试将raw和html_safe添加到文本中，但似乎都没有。我知道一个解决方案就是让类成为带有图标的图像，但我想这样做而不创建额外的图像/ CSS。有什么建议么？

2 个解决方案

#1

You can do this by using the button_tag instead:

您可以使用button_tag代替：

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

This will create a <button type="submit"></button> element with the icon and wordage inside. I've tested and it works. The default action for button_tag is to submit, so if you need a different action (like cancel for example), you can use the :type => "button" option to override the default submit behavior.

这将创建一个带有图标和字幕的

Edit: For Bootstrap 3, the icon class names have changed, so you would put

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

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

Notice, there is no longer a special class for white icons. Just make a css class .white and put color: #fff;. Simple. You can use any color or text style you like, since the icons are now a font.

请注意，白色图标不再是特殊类。只需制作一个css类.white并放置颜色：#fff;。简单。您可以使用任何颜色或文本样式，因为图标现在是一种字体。

相关问题：在Twitter Bootstrap 2中添加要提交按钮的图标，以及如何将Bootstrap 3的字形更改为白色？

#2

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

You may need to adjust the padding to match the size of the icon.

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

#1