How to add glyphicons to rails link_to helper - Bo

问题:

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

<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!

回答1:

I found the answer to this here

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

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

回答2:

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

Hope this helps somebody in the future

Edit: Removed comma to render the glyphicon correctly.

回答3:

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:

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

回答4:

Using slim, here's link_to:

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

and 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.

回答5:

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

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

回答6:

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

i shove something like this in my 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 .erb usage:

<%= 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 Rails4 but i think it might also work in Rails3

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

Don't mix with other components Icon 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 elements Icon classes should only be used on elements that contain no text content and have no child elements.

回答7:

Using HAML:

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