Best Way to Use Twitter Bootstrap Icons as Links in Ruby on Rails 3

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

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}
      ) %>

How do I use a twitter bootstrap icon instead of a link?

<%= link_to sense, :method => :delete, :confirm => "You sure?" do %>
  <i class="icon-search"></i>
<% end %>

This should do it.

Rails link_to tag tag with styled glyphicon

You have to use " around the string, also need to call html_safe method on it.

<%= link_to "<span class=\"glyphicon glyphicon-comment\"></span>".html_safe, page_path('messages') %>

but a better and cleaner way would be

<%= link_to page_path('messages') do %>
  <span class="glyphicon glyphicon-comment"></span>
<% end %>

How to add glyphicons to rails link_to helper - Bootstrap 3

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.

rails bootstrap icon in a link to

You can use this other form of the link_to helper:

<%= link_to task_path(task) do %>
  <i class="icon-pencil"></i>
<% end %>

Make sure to include the = sign before the link_to call.

Adding a Twitter Bootstrap button icon to button_to in Rails

It looks like you have an issue with your quotes:

<%= button_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

Enclose the label of the button in double quotes, escape the double quotes in your i tag, and finally, wrap everything into a raw() call to ensure the HTML is properly displayed.

Alternatively you can use html_safe:

<%= button_to "<i class=\"icon-search icon-white\">Add To Cart</i>".html_safe, 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

---

good point from @jordanpg: you can't have HTML in the value of a button, so his solution is more appropriate and should get the approved status.
the html_safepart remains valid though.

How to get Twitter-Bootstrap navigation to show active link?

Just made an answer on the very same question here
Twitter Bootstrap Pills with Rails 3.2.2

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>

Icons with actions inside of buttons

You should use a button group: http://twitter.github.com/bootstrap/components.html#buttonGroups

The button on the left would be your normal button, and on the right, you can have your X.

It would make more sense to users I think, and would minimize the number of misclicks.

How to use link_to function on svg icons from bootstrap

Try

<td>
<%= link_to friend, method: :delete, data: { confirm: 'Are you sure?' } 
 do %>
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
<% end %>
</td>

The friend in the link is the path to the controller action

---

Related Topics