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>

值得注意的是按钮标签和输入提交标签的行为之间存在一些差异。查看this 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帮助程序中放置图标，请使用ilink_to帮助程序方法。请按照以下步骤操作：

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

2）运行 bundle install ：

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

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

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

Obs：将图标名称剥离icon-前缀

之前的链接文本

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

Answer 4

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

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

如何将font-awesome图标嵌入到submit_tag中

4 个答案: