Question

我一直在寻找有关如何向rails link_to和button_to帮助者添加glyphicons的详细解释，但我发现很少。到目前为止我收集的内容让我想到了这个：

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

这不起作用，我认为我发现的一个例子是来自Bootstrap 2.有人能指出我这方面的好资源，还是提供一个快速的例子？提前谢谢！

Answer 1

我找到了这个here

的答案

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

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

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

Answer 2

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

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

<i></i>可以转到'Dashboard'的任何一方我只使用Bootstrap 3在Rails 4中测试了这个特定的例子，但这是我之前在Rails 3和Bootstrap中使用的方法2

希望这有助于未来的人

编辑：删除逗号以正确渲染字形。

Answer 3

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

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

这似乎使字体与其他无图标按钮相同。

Answer 4

使用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的跨度下。

Answer 5

您可以使用font-awesome-rails gem来实现此目的，然后执行：

<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>

Answer 6

＆amp;对于那些避免不必要的重复啰嗦事物的人..

我在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

Ooook！我也碰巧注意到这个来自bootstrap的建议（目前v3.3.5）docos：

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

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

Answer 7

使用HAML：

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

Answer 8

无需额外安装 gem 即可更快、更轻松地应用 (fontawasome) 图标。

您可以遵循以下模式：

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

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

如果您需要示例，可以查看我在 GitHub

中的存储库

如何添加glyphicons到rails link_to helper - Bootstrap 3

8 个答案:

无需额外安装 gem 即可更快、更轻松地应用 (fontawasome) 图标。