50

我一直在到处寻找关于如何将字形图标添加到导轨link_to和button_to助手的一个很好的解释，但我发现的很少。到目前为止，我收集到的信息使我想到了这一点：

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

但这不起作用，我认为我发现的一个示例来自 Bootstrap 2。任何人都可以为我指出一个很好的资源，或者提供一个简单的示例吗？提前致谢！

4

8 回答 8

107

我在这里找到了答案

rails 中字形链接的基本形式如下所示：

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

根据需要进行修改。该链接中的第二个示例对我不起作用，我假设是因为我使用的是 rails_bootstrap_sass gem？无论如何，上面的表格对我有用。

于 2013-12-31T23:10:59.050 回答
28

如果您正在寻找内联方法，这对我有用：

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

我只在 Rails 4 中使用 Bootstrap 3 测试<i></i>了'Dashboard'这个特定示例，但这是我之前在 Rails 3 和 Bootstrap 2 中使用的方法

希望这对将来的人有所帮助

编辑：删除逗号以正确呈现字形图标。

于 2014-03-12T17:01:56.087 回答
18

以我的经验，@settheline 的答案几乎是理想的，但在我的网站上，它改变了相对于其他没有图标的按钮的字体。所以我最终做了这样的事情：

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

这似乎使字体与其他无图标按钮保持一致。

于 2014-05-20T22:56:11.467 回答
3

使用苗条，这里是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

可以添加更多文本/等。按钮也是如此，只是不要将它嵌套在字形图标的跨度下。

于 2014-07-16T19:44:33.123 回答
2

使用 HAML：

= link_to deals_path, class: "btn btn-default" do
  = "Dashboard"
  %span.glyphicon.glyphicon-th-large
于 2016-04-11T18:34:54.197 回答
1

您可以font-awesome-rails为此目的使用 gem，然后执行以下操作：

<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>
于 2013-12-20T01:55:31.560 回答
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


哎哟！我也碰巧从引导程序（当前为 v3.3.5）docos中注意到了这个建议：

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

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

于 2015-08-14T00:08:54.233 回答
-1

无需额外安装 gem 即可应用（fontawasome）图标更快更简单的方法。

您可以遵循以下模式：

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

当然，您必须首先从 FONTAWASOME 创建一个免费套件帐户，并且必须在您application.html.erb的头脑中设置它才能使用图标。按照此处给出的说明在 Fontawasome 中创建一个帐户（如果您还没有）。

如果需要示例，可以查看我在GitHub中的 repo

于 2021-04-07T18:47:03.827 回答