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

Posted 2023-03-06

【中文标题】如何将 glyphicons 添加到 rails link_to helper - Bootstrap 3

【英文标题】：How to add glyphicons to rails link_to helper - Bootstrap 3

【发布时间】：2014-01-08 19:21:33

【问题描述】：

我一直在到处寻找关于如何将字形图标添加到 rails 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。谁能指出我在这方面的一个很好的资源，或者提供一个简单的例子？提前致谢！

【参考方案1】：

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

您可以遵循以下模式：

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

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

如果你需要一个例子，你可以在GitHub查看我的repo

【讨论】：

我很确定，建议的方法是更好的解决方案，不是吗？如果您有任何意见或对您不起作用，我很乐意为您提供帮助。请在下方留下您的 cmets。有机会我会尽力帮忙的。

【参考方案2】：

我找到了这个here的答案

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

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

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

【参考方案3】：

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

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

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

【讨论】：

一段时间后今天发现了这个 - 如果您在应用 glyphicon 类和 bootstrap 中的按钮类时遇到问题，那么这就是您一直在寻找的答案！谢谢！

【参考方案4】：

使用 HAML：

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

【参考方案5】：

&对于那些避免不必要地重复冗长的事情的人..

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

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

【参考方案6】：

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

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

<i></i> 可以位于'Dashboard' 的任一侧

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

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

【讨论】：

从 3 升级到 rails 4 后，这个内联解决方案修复了我之前以 do...end 格式设置的断开链接。

【参考方案7】：

使用 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

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

【参考方案8】：

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

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

【讨论】：

嗯...我已经有了 font-awesome-rails，但不确定逗号应该放在哪里。看起来您要么最后缺少一个，要么在fa_icon 之后多了一个？

经过进一步搜索，我不需要 font-awesome 即可使用 Bootstrap 字形。我在上面回答了。