How to add glyphicons to rails link_to helper - Bootstrap 3 - ruby-on-rails

I've been looking everywhere for a good explanation of how to add glyphicons to rails link_to and button_to helpers, but I've found very little. What I've gathered so far has led me to this:
<li>
<%= link_to deals_path, class: "btn btn-default" do %>
<%= content_tag(:i, "Dasboard",:class=>' glyphicon, glyphicon-th-large') -%>
<% end %>
</li>
This doesn't work though and I think the one example I found was from Bootstrap 2. Can anyone point me to a good resource on this, or provide a quick example? Thanks in advance!

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.

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.

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.

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.

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

You can use the font-awesome-rails gem for this purpose, and then do:
<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>

&For those who'd avoid unnecessary repetition of the long-winded thing..
i shove something like this in my app/helpers/application_helper.rb:
module ApplicationHelper
def glyph(icon_name_postfix, hash={})
content_tag :span, nil, hash.merge(class: "glyphicon glyphicon-#{icon_name_postfix.to_s.gsub('_','-')}")
end
end
Example .erb usage:
<%= button_tag glyph("heart-empty", aria_hidden: "true", foo: "bar"), type: "button", class: "btn btn-default" %>
<%= link_to glyph(:eye_open) + " Oook", some_path, class: "nav" %>
I am using this in Rails4 but i think it might also work in Rails3
Ooook! i also happened to notice this advise from the bootstrap (Currently v3.3.5) docos:
Don't mix with other components Icon classes cannot be directly combined with other components. They should not be used along with
other classes on the same element. Instead, add a nested <span> and
apply the icon classes to the <span>.
Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements.

There is faster and easier way to apply (fontawasome) icons without additional gem installations.
You may follow this pattern:
<%= link_to root_path, class: "nav-link" do %>
<i class="fas fa-pencil-alt"></i>
<% end %>
Of course, you must first create a kit FREE account from the FONTAWASOME and it must be set in your application.html.erb's head to use the icons.
Follow the instructions given here to create an account in Fontawasome (if you don't have one yet).
If you need an example, you can check out my repo in GitHub

Related

add erb tag to link_to class in rails

I have a link class like
link_to( class: 'btn_download<%= index %>')
from a .each_with_index model call
Model.each_with_index do |m, index|
but it throws an error
and when i try with #{index} it just adds #{index} to the class name instead of dynamically adding 'index'
As I noticed there are some issues in your code. Please find below the code snippet example I wrote similar to your case which will help you to fix your issue
<% User.all.each_with_index do |m, index| %>
<%= link_to users_path, class: "btn_download#{index}" do %>
<span class="fa fa-sign-out"></span>
Download
<% end %>
<% end %>
So instead of using 'btn_download <%= index %>' try "btn_download#{index}".
Also, Use double quotes
class: "btn btn-primary btn-sm download_btn#{index}"
instead
class: 'btn btn-primary btn-sm download_btn#{index}'
Please let me know if you have any confusion in this.
If you want to wrap your link around an icon, use the following syntax:
<%= link_to ..._path(...) do %>
<i class="fa fa-spin fa spinner"></i>
<% end %>
You have to append a do onto the link to and then close the block with an end. And just put whatever inbetween (icon or image or div).

link_to block not working

I'm using a series of link_to blocks to create buttons in my application. However I'm finding that these links don't end up working. As I mouse-over the button, it recognizes the link, the correct url displays in the lower left-hand corner in firefox, but when I click, nothing happens. Nothing comes up in my terminal or development log either.
My code is as follows:
<%= link_to new_folder_path do%>
<div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
<% end %>
This renders the following html:
<li>
<a href="/folders/new">
<div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
</a>
</li>
I should also note that if I just type the standard link in without the do block, it runs just fine:
<li><%= link_to "test", new_folder_path %></li>
Any thoughts on this would be much appreciated!
Try this.
= link_to "<span class='glyphicon glyphicon-plus'></span>Add Folder".html_safe, new_folder_path, class: 'btn btn-default add-button add_fields'
You're probably better using button_to for the buttons -
Generates a form containing a single button that submits to the URL created by the set of options.
So instead of your link_to, you'd be able to use:
<%= button_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>
As a sidenote, if you're trying to style elements inside an <a> tag, you're going to have problems. You'll be much better styling the <a> tag itself, or not at all.
As such, the issue you're getting could probably be resolved using the following:
<%= link_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>
--
Icons
I know Bootstrap includes Glyphicons. If they're anything like ionIcons, they'll work by prepending the glyph with a :before pseudo class.
If this is the case, you don't need a separate <span> element to encapsulate them; just add the class to your link/button and the :before should be prepended.
Of course, if you want to style the span inside the link, you'll have to use the link_to block; however you need ensure you encase your text in the span instead of having it with no content.
Turned out I had dropped a class into my div that prevented the link from rendering (add_fields was the class). Profoundly unsatisfying answer it is what it is. Thanks to anyone who took the time to give me a hint.

Linking Font Awesome icon to Rails attribute

I'm trying to have a Font Awesome icon be hyperlinked with the string of a Rails attribute.
I have tried this,
<%= link_to do %>
<i class="fa fa-link"><% school.website %></i>
<% end %>
this,
<i class="fa fa-link" href="<% school.website %>"></i>
and this:
<i class="fa fa-link" href="<%= school.website %>"></i>
among other variations, and can't seem to get the syntax right.
Would really appreciate some help with the syntax here, can't seem to find a specific answer to how linking with attributes works, only actual static text hrefs.
PS: I'm new to Rails / using Rails 4.2.
Try this:
<%= link_to ('<i class="fa fa-link"></i>').html_safe, desired_path %>
Considering school.website is a URL and you have included icons in CSS, the following will do:
<%= link_to(school.website) do %>
<i class="fa fa-link"></i>
<% end %>
Passing it as a block works too.
<%= link_to school.website do %>
<%= '<i class="fa fa-link"></i>'.html_safe %>
<% end %>
Assuming school.website is a URL that you would like to link to and display the link as well alongside the link icon from font awesome:
<%= link_to("<i class='fa fa-link'></i> #{school.website}".html_safe,school.website) %>
I am going to suggest something a little different.
I am personlly using glyphicons/fa a lot on my website, so I decided to create a little helper in application_helper.rb
application_helper.rb
def fa(glyph, text = nil)
html = "<i class=\"fa fa-#{glyph}\"></i>"
html << " #{text.to_s.html_safe}" if text
html.html_safe
end
And actually the correct syntax to use in views becomes either :
<%= link_to(school.website, class: "xxx") do %>
<%= fa('link') %>
<% end %>
OR (more compact)
<%= link_to(school.website, class: "xxx"){ fa('link') } %>
You can use a block as well if your link target is hard to fit into the name parameter. ERB example:
try this:
<%= link_to(school.website) do %>
<%= fa_icon "fas link" %>
<% end %>

Can I use link_to to link an image and a text

Well, I am using "font-awesome-rails" gem. I am pretty much used to font-awesome outside Rails, but I guess it's not that popular among Rails community.
Once installed, it creates icons using the format
<i class="nameoftheicon"> </i>
I thought of using it for my site logo, which would consist of the icon from font-awesome and some text. So I tried:
<%= link_to "", root_path, class: "icon-puzzle-piece icon-2x" %>
<%= link_to "My site", root_path, id: 'logo' %>
It works, but when I hover, they act as two different elements.
What is the Rails way of combining an image and a text under a single <a> tag.
And is there any popular Rails alternative to font-awesome?
Pass a block to link_to and the block will be linked
<%= link_to path, id: "logo" do %>
<i class="icon-puzzle-piece icon-2x"></i>
My Super Site
<% end %>
Try it,
You can directly mention rails image_tag in link_to as,
<%= link_to image_tag("image_name")+"your text", root_path, :class=>"icon-puzzle-piece icon-2x" %>
Yes you can. For complex anchor such as images, just remove the first argument(the link text or anchor), and attach a block after the method.
link_to(root_path){<i class="icon"></i>}
The content inside block will become the anchor.
Hey guys this is a good way of link w/ image (it has lot of props in case you want to css attribute for example replace "alt" or "title" etc)
<%= link_to image_tag("#{request.ssl? ? #image_domain_secure : #image_domain}/images/linkImage.png", {:alt=>"Alt title", :title=>"Link title"}) , "http://www.site.com"%>
Hope this helps!
Yes, you are using a vector font as image but you can use image_tag too, for example:
<%= link_to user_root_path, :class=> "user" do
image_tag("image.jpg", :alt => current_user.name) +
t("dashboard.my_account")
end %>
Don't forget link together both of them with "+"

Adding a Twitter Bootstrap button icon to button_to in Rails

I am working through the Agile Web Development with Rails book but I have been using Twitter Bootstrap instead of the custom styling from the book. I am having trouble adding an icon through GLyphonics to the button_to method. My code looks like this:
<%= button_to <i class="icon-search icon-white">Add To Cart</i>,
line_items_path(product_id: product),
class: "btn btn-success" %>
I have tried quite a few variations but can't seem to get it to work correctly.
I'm not sure how the OP got this to work, but Rails button_to generates an <input type='submit' /> element, which does not allow for HTML in the value field.
See also: input type="submit" Vs button tag are they interchangeable?
The best alternative in this situation is to force link_to to PUT (or POST):
<%= link_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"),
line_items_path(product_id: product),
class: "btn btn-success",
method: :put %>
You can add the icon as a child element:
<%= button_to button_path, method: :delete do %>
<span class="glyphicon glyphicon-search"></span>
<% end %>
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.
Using raw() or #html_safe still did not work for me.
I am using a helper method to create a button_to flag content. Ended up using the following in my helper method (path is defined beforehand):
form_tag path, :method => :post do
button_tag do
content_tag :i, 'Flag as inappropriate', :class => 'icon-flag flag_content'
end
end
I used this one and it works fine for me :
<%= link_to(line_items_path(product_id: product),
method: :put,
class: 'btn btn-success') do %>
<%= content_tag('i', nil, class: 'icon-search icon-white') %> Add To Cart
<% end %>
Hope this helps
I am using this helper:
module ApplicationHelper
def glyph(*names)
content_tag :i, nil, class: names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
end
end
Example:
glyph(:share_alt)
=> <i class="icon-share-alt"></i>
and
glyph(:lock, :white)
=> <i class="icon-lock icon-white"></i>
Using Rails 4 and Bootstrap 3, here's how to create a delete button using link_to or button_to.
Note that I'm using Haml instead of Erb.
In your view:
- #users.each do |user|
= link_to content_tag(:i, ' Delete', class: "glyphicon glyphicon-trash"),
users_path(user),
class: "btn btn-danger",
method: :delete,
data: { confirm: "Delete user #{user.username}?" }
You can also replace the content_tag part with
raw('<i class="glyphicon glyphicon-trash"> Delete</i>'),
This work for me, (and with confirm message)
<%= button_to "/home/delete?cardId="+card.id.to_s, data: { confirm:'Are you sure you want to delete?' } do %>
<i class="fa fa-times"></i>
<% end%>
this generate
<form class="button_to" method="post" action="/home/delete?cardId=15">
<button data-confirm="Are you sure you want to delete?" type="submit">
<i class="fa fa-times"></i>
</button>
</form>

Resources