How to add glyphicons to rails link_to helper - Bootstrap 3

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

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

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

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

Solution 5:

Using HAML:

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