如何将字体真棒图标嵌入 submit_tag答案

【问题标题】：How to embed font-awesome icons into submit_tag如何将字体真棒图标嵌入 submit_tag
【发布时间】：2012-07-31 18:06:59
【问题描述】：

尝试为我的按钮设置用户字体很棒的图标，但我无法让它显示在 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) 也没有效果。

【问题讨论】：

你能让 Font Awesome 图标完全用作输入值吗？
如果您将提交更改为按钮，您可以执行此操作。见this SO。

标签： ruby-on-rails-3 twitter-bootstrap-rails font-awesome

【解决方案1】：

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

尝试使用按钮：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

我认为您需要从助手中删除 html_safe，并使用 raw icon("search") 而不仅仅是 icon("search")

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

【讨论】：