如何嵌入字体真棒图标放到submit_tag(How to embed font-awesome i

2019-07-30 18:43发布

想用户字体真棒图标我的按钮,但我不能让它在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 =原(HTML),没有任何效果。

Answer 1:

输入提交标签不允许嵌套的HTML,你需要显示的图标。

尝试使用一个按钮,而不是:

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

值得一提的按钮,标签和输入的行为之间存在一些差异提交标签。 看看这太问题的一群伟大的细节。 我个人还没有使用按钮标签在我的应用程序的问题。 因人而异对于不同的浏览器和这样的,虽然。



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)创业板添加到您的资产组中的Gemfile:宝石“少护栏,fontawesome”

2)执行命令束安装

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

4)使用* ilink_to *辅助方法,而不是*的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]



文章来源: How to embed font-awesome icons into submit_tag