ruby-on-rails-3 - 如何将字体真棒图标嵌入 submit_tag

Question

尝试为我的按钮使用字体很棒的图标，但我无法让它显示在 submit_tag 中

 <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %>

输出：

 <input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;">

帮手：

def icon(name, size=1)
  #icon("camera-retro")
  #<i class="icon-camera-retro"></i> 

  html = "<i class='icon-#{name}' "
  html += "style='font-size:#{size}em' "
  html += "></i>"
  html.html_safe
end

当我删除助手的 html.html_safe 行时，我得到了同样的结果。它就像 html_safe 不起作用。我也试过 html = raw(html) 也没有效果。

Answer 1

输入提交标签不允许嵌套 HTML，您需要显示一个图标。

尝试使用按钮：

<button class='btn btn-primary' style='width:40px;'>
  <%= icon("search") %>
</button>

值得注意的是按钮标签和输入提交标签的行为之间的一些差异。查看这个 SO question以获得大量详细信息。我个人在我的应用程序中使用按钮标签没有遇到任何问题。但是，YMMV 针对不同的浏览器等。

Answer 2

<%= link_to(status, :method=>:delete) do %>
   <i class='icon-trash icon-large'></i>
<% end %>

Answer 3

您可以在 HTML 代码中添加图标，如下所示：

<i class="icon-search"></i>

然而，如果你想在 Rails link_to helper 中放置图标，请使用 ilink_to helper 方法。请按照以下步骤操作：

1) 将 gem 添加到 Gemfile 中的资产组： gem 'less-rails-fontawesome'

2）运行捆绑安装：

3) 确保@import 'fontawesome'; 在 app/assets/stylesheetes/bootstrap_and_overrides.css.less 中未注释。

4) 使用 *ilink_to* 辅助方法而不是 *link_to* 辅助方法。

<%= ilink_to "upload-alt", "Edit", edit_post_path(post), class: 'btn btn-mini' %>

Obs：在链接文本之前删除图标名称图标前缀

这些说明在这里：https ://github.com/wbzyl/less-rails-fontawesome

Answer 4

我认为您需要摆脱html_safe助手，并使用raw icon("search")而不仅仅是icon("search")

正如 BaronVonBraun 所说 - 使用button而不是input[submit]