I want to have a link to a certain page in my ruby on rails app and I want it to be displayed as a glyphicon ("glyphicon glyphicon-eye-open"), rather than "Show". Please help me. This is my link_to:
<%= link_to 'Show', show_schedule_in_teams_path %>
Please help me. Thanks in advance.
You can pass a block to link_to (If you'd like to use an icon tag etc).
Using FontAwesome as an example,
link_to LINK_URL do
fa_icon 'bathtub'
end
https://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to
this code if you want to show glyphicon using bootstrap
<%= link_to '<i class="glyphicon glyphicon-eye-open"></i>'.html_safe, show_schedule_in_teams_path, :class => 'btn btn-mini btn-danger' %>
First of all, make sure you have bootstrap installed on your rails application. To make so
Add gem 'bootstrap-sass' to your Gemfile
Execute bundle install
Add *= require bootstrap_framework to your application.css
Restart your rails application server
After that, you should be able to use the following code:
<%= link_to '<span class="glyphicon glyphicon-eye-open"></span>'.html_safe, show_schedule_in_teams_path %>
Related
I use the high_voltage gem for creating links to static pages in my rails application. How can I use a picture / icon as a link? I just need some syntax example. Thanks, Karsten
If I got you correctly you have links that lead to static pages you build with high_voltage gem.
To build a link with an icon:
<%= link_to page_path('page') do %>
<i class="icon-ok icon-white"></i> # or any other html icon
<% end %>
I'm trying to link to a youtube page in a rails app with the font-awesome gem.
<i><%= link_to fa_icon "youtube-square 2x", #book.youtube %></i>
In doing so, I receive no implicit conversion of Symbol into String error message.
Do I need to remove the font-awesome helper and include it as a class, or is there another way to make this work together?
Looking at the docs, I believe that you need to put the fa_icon helper in a link_to block:
<%= link_to #book.youtube do %>
<%= fa_icon "youtube-square 2x" %>
<% end %>
I'm using the Kaminari gem for pagination in Rails 4. I want to use the < and > glyphicons (chevron-right and chevron-left) on the side of the pages to go to previous and next page, and can't figure out how to do that. Here's what I have so far:
To make a glyphicon into a link, I can use this:
<%= link_to "some_link" do %>
<i class="glyphicon glyphicon-chevron-right" title="Next Page"></i>
<% end %>
Kaminari also comes with <%= link_to_next_page #pages, 'Next Page' %> but that displays text on the page, not an image
Is there a good way to implement this?
Customize the views/kaminari/_next_page.html.erb in Kaminari
Remove this part of the link_to
raw(t 'views.pagination.next')
and replace with
'<i class="glyphicon glyphicon-chevron-right"></i>'.html_safe
Update
Make sure you have run this so you see the views to modify.
rails generate kaminari:views
For Bootstrap...
rails generate kaminari:views bootstrap
The solution is simple; Using the logic in the explanation Beengie gave, I just needed to include some raw HTML in the link using 'MY_HTML'.html_safe
<%= link_to_next_page #records, '<i class="glyphicon glyphicon-chevron-right"></i>'.html_safe %>
<%= link_to_previous_page #records, '<i class="glyphicon glyphicon-chevron-left"></i>'.html_safe %>
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
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 "+"