CODEWITHSUNDEEP
ruby-on-railsfont-awesome
AdamNYC
AdamNYC

Reputation: 20415

Embed font-awesome icon in Rails button_to

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.

Upvotes: 5

Views: 5976

Answers (5)

S-Toky
S-Toky

Reputation: 31

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

Upvotes: 3

cgenco
cgenco

Reputation: 3557

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)

Upvotes: 0

Adam Kolkman
Adam Kolkman

Reputation: 132

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.

Upvotes: 0

markquezada
markquezada

Reputation: 8535

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.)

Upvotes: 7

ranendra
ranendra

Reputation: 2512

Add class option for button_to helper

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

Upvotes: 4

Related Questions