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

Posted 2023-03-06

【中文标题】如何在rails提交按钮中放置图标

【英文标题】：how to put icon in rails submit button

【发布时间】：2012-10-21 11:27:16

【问题描述】：

我正在使用 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。有什么建议吗？

【问题讨论】：

这是一个通过 CSS 解决的客户端问题。请显示您的客户端代码，而不是您的 Rails 代码。

我特别想问是否有办法使用 rails/erb 来做到这一点。我希望生成的 html 在按钮文本中包含图标，而不是使用 css 或其他图像

我不是 Rails 专家，但如果正确包含 Bootstrap，HTML 应该会生成一个图标。看起来像 Rails 问题。

好的...然后显示 HTML！

这是生成的 html <input type="submit" value="Submit for Approval <i class='icon-share-alt icon-white'></i>" name="commit" class="button_green">

【参考方案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?

【讨论】：

我不喜欢这个解决方案，因为它没有使用 f 变量......虽然结果可能是一样的。

【参考方案2】：

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

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