如何将glyphicons添加到rails的link_to辅助函数 - Bootstrap 3

50

我一直在寻找如何将glyphicons添加到Rails的link_tobutton_to帮助程序中的好方法,但是我发现很少有资料。目前为止我所了解的内容如下:

<li>
  <%= link_to deals_path, class: "btn btn-default" do %>
    <%= content_tag(:i, "Dasboard",:class=>' glyphicon, glyphicon-th-large') -%>
  <% end %>
</li>

不过这并不起作用,我想我找到的一个例子是来自Bootstrap 2的。 有人可以向我指出一个好的资源吗?或者提供一个快速的示例?谢谢!

8个回答

109
我发现了这个问题的答案 在这里
Rails中一个字形链接的基本形式如下:
<%= link_to deals_path, class: "btn btn-default" do %>
    <i class="glyphicon glyphicon-euro"></i> Dashboard
<% end %>

根据需要进行修改。链接中的第二个示例对我无效,我猜测是因为我正在使用rails_bootstrap_sass gem?不管怎样,上述表格对我有效。


28

如果你正在寻找一种行内方法,这个对我有效:

<%= link_to '<i class="glyphicon glyphicon-th-large"></i> Dasboard'.html_safe, deals_path, class: 'btn btn-default' %>

<i></i> 可以放在 'Dashboard' 的任一侧。我只在 Rails 4 和 Bootstrap 3 中测试过这个特定的例子,但在 Rails 3 和 Bootstrap 2 中我之前使用过这种方法。

希望这对未来的某些人有所帮助。

编辑:移除逗号以正确显示 glyphicon。


1
从Rails 3升级到4后,这个内联解决方案修复了之前在do...end格式中设置的损坏链接。 - Stephen

18

根据我的经验,@settheline的回答几乎是理想的,但在我的网站上,它会改变相对于其他没有图标的按钮的字体。因此,我最终做了像这样的事情:

<%= link_to deals_path, class: "btn btn-default" do %>
    <span class="glyphicon glyphicon-euro"></span> Dashboard
<% end %>

而且这似乎使字体与其他没有图标的按钮保持一致。


1
今天花了一些时间找到了这个 - 如果你在使用Rails时遇到了将glyphicon类与来自Bootstrap的button类一起应用的问题,那么这就是你一直在寻找的答案!谢谢! - Dustin James

3
使用Slim,这是link_to的用法:
    = link_to deals_path
        span.glyphicon.glyphicon-th-large

还有button_to

    = button_to deals_path, class: "btn btn-primary"
        span.glyphicon.glyphicon-th-large

您也可以在按钮中添加更多文本等内容,但请勿将其嵌套在 glyphicon 的 span 标签下。


2
使用 HAML:
= link_to deals_path, class: "btn btn-default" do
  = "Dashboard"
  %span.glyphicon.glyphicon-th-large

1
您可以使用font-awesome-rails宝石来实现此目的,然后执行:
<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>

嗯...我已经使用font-awesome-rails了,但不确定逗号应该放在哪里。看起来你要么在末尾缺少一个逗号,要么在fa_icon之后多了一个逗号? - settheline
经过进一步搜索,我不需要font-awesome来使用Bootstrap图标。我在上面已经回答了。 - settheline

1

&对于那些想要避免冗长重复的人...

我会将类似这样的内容放在我的app/helpers/application_helper.rb文件中:

module ApplicationHelper
  def glyph(icon_name_postfix, hash={})
    content_tag :span, nil, hash.merge(class: "glyphicon glyphicon-#{icon_name_postfix.to_s.gsub('_','-')}")
  end
end


示例.erb用法:

<%= button_tag glyph("heart-empty", aria_hidden: "true", foo: "bar"), type: "button", class: "btn btn-default" %>
<%= link_to glyph(:eye_open) + " Oook", some_path, class: "nav" %>

我正在使用这个在Rails4中,但我认为它也可能适用于Rails3 好的!我还注意到了Bootstrap(目前版本为v3.3.5)docos中的这些建议:

不要与其他组件混合使用图标类不能直接与其他组件组合使用。它们不应与同一元素上的其他类一起使用。相反,添加一个嵌套的<span>并将图标类应用于<span>

仅用于空元素图标类应仅用于不包含文本内容且没有子元素的元素上。


-1

有更快更简单的方法应用(fontawasome)图标,无需额外的 gem 安装。

您可以按照以下模式操作:

          <%= link_to root_path, class: "nav-link" do %>
            <i class="fas fa-pencil-alt"></i>
          <% end %>

当然,您必须首先从FONTAWASOME创建一个免费帐户,并将其设置在application.html.erbhead中才能使用图标。 按照此处给出的说明(如果您还没有帐户)创建Fontawasome帐户

如果您需要示例,可以查看我的GitHub存储库。


我非常确定,提出的方法是更好的解决方案,不是吗?如果您有任何意见或者它对您没有起作用,我很乐意帮助您。请在下面留下您的评论。我会尽可能地在有机会时提供帮助。 - Sarvar Khalimov

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接