Embed font-awesome icon in Rails button_to - ruby-on-rails

I would like to have a button as follow:
[ Sign in with FB]
where FB is a font-awesome icon. I tried the following, but couldn't figure out how to embed the icon to the button:
= button_to "Login with", user_omniauth_authorize_path(:facebook)
Here is how font-awesome is normally invoked (in haml):
%i.icon-facebook-sign
How do I achieve the effect I want?
Thank you.

You can pass a block to button_to like so:
= button_to user_omniauth_authorize_path(:facebook) do
Login with
%i.icon-facebook-sign
(Though I'm not sure why you wouldn't just use the Facebook icon itself as the button.)

Add class option for button_to helper
= button_to "Login with", user_omniauth_authorize_path(:facebook), :class => 'icon-facebook-sign'

try this code, it runs for me
<%= button_to line_items_path(product_id: produit.id),class:"btn btn-outline-primary" do %>
<i class="fas fa-shopping-basket"></i>
<% end %>
just change the icon

You can create a helper method that uses the button tag but customizes the output:
#application_helper.rb
def button_to_with_icon(text, path, classes)
form_tag path, :method => :post do
button_tag(classes) do
raw text
end
end
end
Then call the helper method with the raw html embedded as an argument:
<%= button_to_with_icon("login with <i class='fa fa-facebook-official'></i>", { action: "omniauth_authorize", controller: "users" }, class: "btn btn-info") %>
The action, controller, and class settings are just examples. But you can modify this to suit your needs, I think.

Here's the helper I made that works for me:
def html_button_to(html = nil, options = nil, html_options = nil)
button_to(options, html_options) do
html
end
end
Combined with the font-awesome-rails gem, it lets you do:
html_button_to fa_icon(:facebook, text: "Login with"), user_omniauth_authorize_path(:facebook)

Related

Ruby on Rails - how to add link to view through button

i have the below code, and i just want to link my button to the next view
<button type="submit" class="login-button"><link_to home_page.html.erb></link_to>
<i class="fa fa-chevron-right"></i></button>
how can i fix this
I suppose you have form_tag or form_for somewhere outside your button.
You could do it totally the Rails way like
<%= submit_tag("submit") %>
or if you prefer a link
<%= link_to 'submit', your_path, your_options %>
or a button
<%= button_to 'subimit, your_path, your_options %>
just have a look rails guides and you will find plenty of examples
=> link_to generates a <a> tag, which is not input type="submit".Use button_to, which generates a form with a input type="submit" button to the link.
Assuming path of home_page.html.erb is homepage_path(replace it with your path.)
<%= button_to home_page_path,class: "login-button", method: :get do%>
<i class="fa fa-chevron-right"></i>
<% end %>
Alternatively you can use like this:-
<%= button_to "<i class="fa fa-chevron-right"></i>".html_safe, homepage_path, class: "login-button", method: :get %>
I'm not sure to have understood, but if you need to link to another page you don't need a button, you need a link.
You can add a simple link to that url (not the page, but the route to that page) and style it as a button with css if you want to make it look as you like.
If you need to submit and elaborate some stuff calling a method from your controller, it depends:
1.If your controller is a simple controller you can manage it with a redirect_to at the end of your method
def method
# your elaboration
redirect_to :your_route
end
2.If it is an API controller and you call it from a javascript function, you can add to your callback a window.location.href to your route
success: (data) => {
// your elaboration
window.location.href = "path/to/your/page"
}

divs in button_to in ruby on rails

When I try to use button_to for link smthing - rails add to that button tag and my design is broke. How i can fix that? For example:
<%= f.submit %>
<%= button_to 'Back', resumes_path %>
I know that i can use somthing like link_to, but in this situation i need to use button_to. Thanks.
Please create any class name or div id and write button css.
<%= link_to 'Back', resumes_path , :class => "button_css" %>
and write style,
.button_css
{
// your button style...
}
Edit : Try this
<% content_tag :button :type => :submit do %>Button<% end %>
This will create a button, you can then add onclick event to redirect the page.

How to make a button work as a link in erb?

<%= link_to 'New Post', new_post_path %>
This produces link to new_post_path. Previously i used <input type="submit" class="new" name="Addlist" value="Add New" /> which resembled like a button. So how can i make the link look like button in erb?
Just to throw another option out there since I had a scenario where the button_to option didn't work. This looks kind of similar to that.
<%= link_to '<button type="button">New Post</button>'.html_safe, new_post_path %>
What I basically wanted is a button that doesn't turn into a submit, since I have multiple buttons on the page that aren't related to a form, and I really just want it to just go to another page.
Take a look at button_to. In summary it will be simmilar to this:
<%= button_to "New Post", { :action => "new" }, :method => :get %>
Although be aware, this method accepts the :method and :confirm modifiers described in the link_to documentation. If no :method modifier is given, it will default to performing a POST operation. You can also disable the button by passing :disabled => true in html_options. If you are using RESTful routes, you can pass the :method to change the HTTP verb used to submit the form.
#Ryan's answer is good but sadly fails html validation http://validator.w3.org/
error: The element button must not appear as a descendant of the a element.
Why not simply apply a (CSS) class to your link and make it appear as a button.
erb:
<%= link_to "Button Text", new_post_path, class: 'button' %>
produces (valid & semantic) HTML:
<a class="button" href="/post/new">Button Text</a>
which you can then style to look like a button.
Example: http://jsfiddle.net/nelsonic/FQK9M/7/

button with an image?

I am trying to create a button with an image. So basically, I need the button_to version of the code below :|
<%= link_to image_tag(product.image_url, :class => "img"), line_items_path(:product_id => product) %>
This is a pretty old post, but for future reference: since Rails 3.2.1 you can use button_tag instead of button_to, as the first one natively allows images:
Creates a button element that defines a submit button, reset button or a generic button which can be used in JavaScript, for example. You can use the button tag as a regular submit tag but it isn’t supported in legacy browsers. However, the button tag allows richer labels such as images and emphasis, so this helper will also accept a block.
As for your example:
<%= button_tag image_tag(product.image_url), line_items_path(:product_id => product), class: 'img' %>
I didn't test the code, but it should work. It is possible you need to declare the url with url:
This is my solution:
Use a button helper (you can use the button_to helper method):
<%= f.submit 'Save', :class => "button_with_image_save" %>
CSS:
.button_with_image_save {
background: url(../images/icons/page_save.png) #f2efa8 no-repeat 10px 6px;
text-indent:30px;
display:block;
cursor: pointer;
}
You can create a helper as button_to link -
<%= button_to product.image_url, line_items_path(:product_id => product) %>
and in application_helper
def button_to(image_path, link)
link_to (image_tag(image_path, :class => "img"), link)
end
I guess this is what you want.
The short answer is that you need to create a helper method, which is quite simple to do:
Here is a similar SO posting the explains it: Is there a way with rails form helper to produce a button tag for submit
Good luck
Image submit button:
<%= image_submit_tag("team/team1.png", class: 'image-responsive') %>
Link with image:
<%= link_to(image_tag("team/team1.png", class: 'image-responsive'), root_path, :method => :get) %>
Add the image is the folder app/assets/image
In the view
<%= image_submit_tag('nameimage.png') %>
the disadvantage is that you can not change the size with size, but you must have the image of the size you want to appear

adding a class to a link_to is breaking the link

I'm using link_to in RoR 3
When I use it like this, it works fine:
<%= link_to "Add to your favorites list",:controller =>
'favourite_companies', :action =>'create',
:company_id=>"#{#company.id}",
:company_name=>"#{#company.company_name}" %>
But I would like to pass in a class as well
however, this is not working for me. The class works, but it breaks the link. Any ideas?
<%= link_to "Add to your favorites list",{:controller =>
'favourite_companies', :action =>'create'},
:company_id=>"#{#company.id}",
:company_name=>"#{#company.company_name}",
:class=>"ui-button-text button_text"} %>
<%= link_to "Add to your favorites list",{:controller =>
'favourite_companies', :action =>'create'},
:company_id=>"#{#company.id}",
:company_name=>"#{#company.company_name}",
:class=>"ui-button-text button_text"} %>
try this
<%= link_to "Add to your favorites list", :controller =>
'favourite_companies', :action =>'create',
:company_id=>"#{#company.id}",
:company_name=>"#{#company.company_name}",
{ :class=>"ui-button-text button_text" } %>
Since the :class should be in :html_options (refering to API)
link_to(body, url, html_options = {})
The proper way of doing what you have is as follows:
link_to "Foo", { URL_FOR PARAMS HERE }, :class => "bar"
As far as setting the controller and action manually like this, well, it's crap. Rails builds url helpers for you; use them and save yourself some time, energy, and add clarity, all at once:
link_to "Foo", favourite_companies_path(#company), :method => :post
What you're doing with the string interpolation is a bad idea too…it's just wasteful and cluttered for no reason at all. The following is the same, just better:
link_to "Foo", :company_id => #company.id, :company_name => #company.name
As far as why your link wasn't working, if wrapping it in a div helped it sounds like you have a problem with your HTML structure, not the link_to syntax.
I'm using a link_to do-end block so the above previous solutions didn't work for me.
If you want to embed other tags in your a tag, then you can use the link_to do-end block.
<%= link_to favourite_companies_path(:company_id => #company.id, :another_url_param_here => "bar"), { :class => "ui-button-text button_text", :title=> "We can have more html attributes as well" } do %>
<i class="fa fa-star"></i>
<%= #company.company_name %>
<% end %>
In this case it's
<%= link_to path(url_params), html_options = {} do %>
<% end %>
Be careful because in Rails 5 the above methods will still result in a wrong URL generation. The controller and action need to be put in a literal hash in order for it to work in Rails 5. What you will have should be something like this
<%= link_to "Add to your favorites list",
{ controller: "favourite_companies", action:"create"},
company_id: #company.id,
company_name: #company.company_name,
class: "ui-button-text button_text" %>

Resources