Ruby-on-rails 如何将字形添加到 rails link_to helper - Bootstrap 3

How to add glyphicons to rails link_to helper - Bootstrap 3

提问by settheline

I've been looking everywhere for a good explanation of how to add glyphicons to rails link_toand button_tohelpers, but I've found very little. What I've gathered so far has led me to this:

我一直在到处寻找有关如何将字形添加到导轨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>

This doesn't work though and I think the one example I found was from Bootstrap 2. Can anyone point me to a good resource on this, or provide a quick example? Thanks in advance!

但这不起作用，我认为我发现的一个例子来自 Bootstrap 2。谁能给我指出一个很好的资源，或者提供一个简单的例子？提前致谢！

回答by settheline

I found the answer to this here

我在这里找到了答案

The basic form of a glyph link in rails looks like this:

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

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

Modify as needed. The second example in that link didn't work for me, I assume because I'm using the rails_bootstrap_sass gem? Regardless, the above form worked for me.

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

回答by DazBaldwin

If you're looking for an inline method, This works for me:

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

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

The <i></i>can go either side of the 'Dashboard'I've only tested this particular example out in Rails 4 with Bootstrap 3 but this was the method I used prior in Rails 3 and Bootstrap 2

的<i></i>可以去的任一侧'Dashboard'我只在轨道4与引导3测试该特定示例中出来，但，这是在导轨3和自举2之前我所使用的方法

Hope this helps somebody in the future

希望这有助于将来的某人

Edit: Removed comma to render the glyphicon correctly.

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

回答by alexvicegrab

In my experience the answer by @settheline is almost ideal, but on my website it changes the font relative to other buttons without icons. So I ended up doing something like this:

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

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

And this seems to keep the font equal to other iconless buttons.

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

回答by anitdas

Using slim, here's link_to:

使用slim，这里是link_to：

    = link_to deals_path
        span.glyphicon.glyphicon-th-large

and button_to:

和button_to：

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

It's possible to add more text/etc. to the button as well, just don't nest it under the glyphicon's span.

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

回答by violet313

&For those who'd avoid unnecessary repetition of the long-winded thing..

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

i shove something like this in my app/helpers/application_helper.rb:

我把这样的东西塞进我的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

Example .erbusage:

.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" %>

I am using this in Rails4but i think it might also work in Rails3

我正在使用它，Rails4但我认为它也可能适用于Rails3

Ooook! i also happened to notice this advise from the bootstrap (Currently v3.3.5) docos:

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

Don't mix with other componentsIcon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span>and apply the icon classes to the <span>.

Only for use on empty elementsIcon classes should only be used on elements that contain no text content and have no child elements.

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

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

回答by Bruno Peres

Using HAML:

使用 HAML：

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

回答by Stoic

You can use the font-awesome-railsgem for this purpose, and then do:

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

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