如何将Font Awesome图标嵌入submit_tag中。

Question

尝试在我的按钮中使用 Font Awesome 图标，但无法在 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)，但是没有任何效果。

- ajbraus

---

你能让Font Awesome图标作为输入值正常工作吗？ - dylanjha

如果您将提交更改为按钮，则可以执行此操作。请参见此SO。 - Chiperific

Answer 1

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

尝试使用一个按钮代替：

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

button 标签和 input submit 标签的行为有一些不同之处值得注意。在这个 SO 问题中可以找到很多详细信息。就我个人而言，在我的应用程序中使用 button 标签没有遇到过问题。然而，对于不同的浏览器等情况可能会有不同的结果。

- BaronVonBraun

Answer 2

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

- sparkle

Answer 3

您可以像这样在您的HTML代码中添加图标：

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

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

1）在Gemfile中的assets组中添加gem：gem 'less-rails-fontawesome'

2）运行命令:

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

4）使用*ilink_to*帮助方法代替*link_to*帮助方法。

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

提示：在链接文字前加上去掉icon-前缀的图标名称

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

- Duany Dreyton

Answer 4

我认为你需要从helper中删除html_safe，并使用raw icon("search")代替icon("search")

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

- 410 gone