Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 871
kibaekr Avatar asked May 26 '12 08:05

kibaekr


4 Answers

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}
      ) %>
like image 61
jigfox Avatar answered Nov 19 '22 02:11

jigfox


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

<%= link_to('', vote_against_mission_mission_path(:id => mission.id), :class => "chevron-down") %> 
like image 33
ricsrock Avatar answered Nov 19 '22 01:11

ricsrock


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
like image 4
Américo Duarte Avatar answered Nov 19 '22 00:11

Américo Duarte


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 %>
like image 2
Blaze Avatar answered Nov 19 '22 01:11

Blaze