Geek asks and answers

Best way to use Twitter bootstrap icons as links in Ruby on Rails 3?

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

Currently, I use it as an insertable snippet, but the icon does not appear when I use my tablet to view a web page. I am sure there is a better way to use Twitter Bootstrap badges as links to 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>
+5
source share
5 answers

If you create an assistant 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 as follows:

  <%= 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}
      ) %>
+8
source

If I do not understand what you need, it is less hard:

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

:

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

:

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

The solution above returns the following:

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

I changed something and now works 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>

Usage remains unchanged:

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

Using link_to with icon loading

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

+1
source

More articles:


All Articles