How to add glyphicons to rails link_to helper - Bootstrap 3

Question

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!

score 109 · Accepted Answer · edited Jan 16 '17 at 06:00

109

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.

edited Jan 16 '17 at 06:00

akbarbin

4,985
1
28
31

answered Dec 31 '13 at 23:10

settheline

3,333
8
33
65

score 28 · Answer 2 · edited Jun 09 '15 at 19:01

28

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.

edited Jun 09 '15 at 19:01

Gideon Rosenthal

1,953
2
18
16

answered Mar 12 '14 at 17:01

DazBaldwin

4,125
3
39
43

1

After upgrading to rails 4 from 3 this inline solution fixed my broken links that were previously setup in the do...end format. – Stephen Feb 26 '18 at 16:52

score 18 · Answer 3 · edited Jun 02 '16 at 21:16

18

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.

edited Jun 02 '16 at 21:16

user664833

18,397
19
91
140

answered May 20 '14 at 22:56

alexvicegrab

531
3
18

1

Found this today after some time - if you're having rails issues applying the glyphicon class along with a button class from bootstrap then this is the answer you've been looking for! Thanks! – Dustin James Jul 24 '14 at 17:51

score 3 · Answer 4 · answered Jul 16 '14 at 19:44

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.

score 2 · Answer 5 · answered Apr 11 '16 at 18:34

2

Using HAML:

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

answered Apr 11 '16 at 18:34

Bruno Peres

2,980
1
21
19

score 1 · Answer 6 · answered Dec 20 '13 at 01:55

1

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

answered Dec 20 '13 at 01:55

Stoic

10,536
6
41
60

Hmmm...I've got font-awesome-rails going, but not sure where the comma's are supposed to go in here. Looks like you're either missing one on the end, or have an extra one after `fa_icon`? – settheline Dec 31 '13 at 22:48
After further searching, I don't need font-awesome to use Bootstrap glyphs. I answered above. – settheline Dec 31 '13 at 23:12

score 1 · Answer 7 · answered Aug 14 '15 at 00:08

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

score -1 · Answer 8 · answered Apr 07 '21 at 18:47

There is faster and easier way to apply (fontawasome) icons without additional gem installations.

You may follow this pattern:

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

Of course, you must first create a kit FREE account from the FONTAWASOME and it must be set in your application.html.erb's head to use the icons. Follow the instructions given here to create an account in Fontawasome (if you don't have one yet).

If you need an example, you can check out my repo in GitHub

I am quite sure, proposed way is better solution, isn't it? If you have any comment or it didn't work for you, I would be glad to help you. Please leave your comments below. I will try to help when I have a chance. — Sarvar Khalimov, Apr 12 '21 at 20:32

How to add glyphicons to rails link_to helper - Bootstrap 3

8 Answers8

There is faster and easier way to apply (fontawasome) icons without additional gem installations.

Linked