在 Rails button_to 中嵌入 font-awesome 图标答案

【问题标题】：Embed font-awesome icon in Rails button_to在 Rails button_to 中嵌入 font-awesome 图标
【发布时间】：2013-03-12 04:18:15
【问题描述】：

我想要一个按钮如下：

[ Sign in with FB]

其中 FB 是一个很棒的字体图标。我尝试了以下方法，但不知道如何将图标嵌入到按钮中：

= button_to "Login with", user_omniauth_authorize_path(:facebook)

下面是font-awesome 的正常调用方式（在haml 中）：

%i.icon-facebook-sign

如何达到我想要的效果？

谢谢。

【问题讨论】：

标签： ruby-on-rails font-awesome

【解决方案1】：

您可以像这样将pass a block 转为button_to：

= button_to user_omniauth_authorize_path(:facebook) do
    Login with
    %i.icon-facebook-sign

（虽然我不确定你为什么不直接使用 Facebook 图标本身作为按钮。）

【讨论】：

【解决方案2】：

为 button_to helper 添加类选项

= button_to "Login with", user_omniauth_authorize_path(:facebook), :class => 'icon-facebook-sign'

【讨论】：

非常感谢您的及时回复。我无法完成这项工作。你能把你的答案扩大一点吗？我想知道如何准确地为 button_to 添加类选项，以及在此更改之后，为什么上面的调用会起作用。再次感谢。
这里有更好的解释api.rubyonrails.org/classes/ActionView/Helpers/…
我以为你建议重写 button_to 方法。我尝试了您的示例，但没有成功。图标不会出现。我觉得是有道理的，因为我们需要image标签，加上class，而且必须和“Log in”的文字对齐。
总而言之，对于使用 rails 助手生成的任何 html 元素，您可以使用 ':class' 符号为其分配一个类名。
嗨ranendra，我认为这种情况是一个例外，因为它涉及将html标签嵌入回字符串。很遗憾，我相信您的解决方案不会奏效。

【解决方案3】：

您可以创建一个使用按钮标签但自定义输出的辅助方法：

#application_helper.rb

def button_to_with_icon(text, path, classes)
  form_tag path, :method => :post do
    button_tag(classes) do
      raw text
    end
  end
end

然后以嵌入的原始 html 作为参数调用辅助方法：

<%= button_to_with_icon("login with <i class='fa fa-facebook-official'></i>", { action: "omniauth_authorize", controller: "users" }, class: "btn btn-info") %>

动作、控制器和类设置只是示例。但我认为，您可以修改它以满足您的需求。

【讨论】：

【解决方案4】：

这是我为我制作的帮手：

def html_button_to(html = nil, options = nil, html_options = nil)
  button_to(options, html_options) do
    html
  end
end

结合font-awesome-rails gem，它可以让你做到：

html_button_to fa_icon(:facebook, text: "Login with"), user_omniauth_authorize_path(:facebook)

【讨论】：

【解决方案5】：

试试这个代码，它为我运行

<%= button_to line_items_path(product_id: produit.id),class:"btn btn-outline-primary" do %> <i class="fas fa-shopping-basket"></i> <% end %>

只需更改图标

【讨论】：