Best way to use Twitter Bootstrap Icons as Links in Ruby on Rails 3?

Question

What's the best way to use an icon provided by Twitter Bootstrap as a link in Rails 3?

Currently, I am using it like the pasted snippet, but the icon doesn't display when I use my tablet to see the webpage. I'm sure there's a better way to use the Twitter Bootstrap Icons as links on Rails 3.

<%= link_to(vote_against_mission_mission_path(:id => mission.id), :method => :post) do %> 

  <i class="icon-chevron-down blank-vote enlarge"></i>

<% end %><br />

<%= link_to(collect_mission_path(controller: "folders", action: "collect", id: mission.id)) do %>

    <i class="icon-heart blank-favorite enlarge" id="actions-centering"></i>

score 8 · Accepted Answer · answered May 26 '12 at 10:05

If you build a helper like this:

module BootstrapIconHelper
  def icon_link_to(path, opts = {}, link_opts = {})
    classes = []
    [:icon, :blank].each do |klass|
      if k = opts.delete(klass)
        classes << "#{klass}-#{k}"
      end
    end
    classes << "enlarge" if opts.delete(:enlarge)
    opts[:class] ||= ""
    opts[:class] << " " << classes.join(" ")
    link_to content_tag(:i, "", opts), path, link_opts
  end
end

you can write your links like this:

  <%= icon_link_to(
        vote_against_mission_mission_path(:id => mission.id),
        { :icon => "chevron-down", :blank => "vote", :enlarge => true },
        {:method => :post}
      ) %>
  <%= icon_link_to(
        collect_mission_path(controller: "folders", action: "collect", id: mission.id),
        { :icon => "heart", :blank => "favorite", :enlarge => true, id: "action-centering}
      ) %>

score 7 · Answer 2 · answered Jun 15 '12 at 18:03

7

Unless I'm misunderstanding what you're after, way less rigamarole:

<%= link_to('', vote_against_mission_mission_path(:id => mission.id), :class => "chevron-down") %>

answered Jun 15 '12 at 18:03

ricsrock

951
9
13

3

also see http://stackoverflow.com/questions/9401942/using-link-to-with-embedded-html – s2t2 Oct 19 '12 at 05:51

score 4 · Answer 3 · answered Mar 28 '13 at 22:42

I should create this helper:

module BootstrapHelper
  def icon(*names)
    content_tag(:i, nil, :class => icon_classes(names))
  end

  private
  def icon_classes(*names)
    names.map{ |name| "icon-#{name}" }
  end
end

And use like this:

link_to icon(:trash, :white), user_path(@user), method: :delete

score 2 · Answer 4 · answered Apr 10 '13 at 22:57

The solution above is returning this:

<i class="icon-[:remove, :white]"></i>

I changed somethings, and now is working for me:

module BootstrapHelper
  def icon(*names)
    content_tag(:i, nil, :class => icon_classes(names))
  end

  private
  def icon_classes(*names)
    final = ""
    names[0].each do |n|
      final = final + "icon-" + n.to_s + " "
    end
    return final
  end
end

Now it returns it:

<i class="icon-remove icon-white "></i>

The use remains the same:

<%= link_to icon(:remove, :white), doc, :confirm => 'Are you sure?', :method => :delete %>

score 1 · Answer 5 · answered Jul 26 '15 at 21:09

Using link_to with icon bootstrap

<%= link_to edit_idea_path(idea), class: 'btn btn-default' do %>
    <span class="glyphicon glyphicon-pencil"></span>
    Edit
  <% end %>

<%= link_to new_idea_path, class: 'btn btn-primary btn-lg' do %>
  <span class="glyphicon glyphicon-plus"></span>
  New Idea
<% end %>

  <%= link_to idea, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' do %>
    <span class="glyphicon glyphicon-remove"></span>
    Destroy
  <% end %>

http://railsgirls.co.il/en/guides/design/list-page/icons.html

Best way to use Twitter Bootstrap Icons as Links in Ruby on Rails 3?

5 Answers5

Linked

Related