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


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

(Though I'm not sure why you wouldn't just use the Facebook icon itself as the button.)

Adding font awesome icons to your rails forms, Here's a quick tutorial on how to add Font Awesome icons to your Ruby on Rails forms. To begin we will add Bootstrap and the Font Awesome gem to our rails application. @import "font-awesome-sprockets"; @import "font-awesome"; padding-left: 45px; } .contact button.btn.btn-danger.btn-lg { text-align:� Internet Explorer 8 and @font-face. IE8 has some issues with @font-face when combined with :before.Font Awesome uses that combination. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads.

Add class option for button_to helper

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

File: README — Documentation for less-rails-fontawesome (0.7.0), With LESS and fonts from Font Awesome, less-rails-fontawesome is a gem to integrate Font Awesome to Just import fontawesome right after twitter/bootstrap : To ease placing icons in Rails link_to helper use the ilink_to helper method. Font Awesome icons is a great way to show icons in your html page. It's easy, fast and free. Yeah! It's free. Who doesn't like free stuff, eh? Here, I am going to

You can create a helper method that uses the button tag but customizes the output:


def button_to_with_icon(text, path, classes)
  form_tag path, :method => :post do
    button_tag(classes) do
      raw text

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.

link_to (ActionView::Helpers::UrlHelper), link_to(body, url, html_options = {}) # url is a String; you can use URL helpers like # posts_path link_to(body, If you're upgrading to Rails 3 you'll need to make sure you include rails.js (which is in Using fontawesome icons inside link_to. Font Awesome 5 Released! More Icons Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them!

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

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)

how to properly display a font awesome icon in haml - css - html, I'd like to add the fa-sort icon from font-awesome to a rails application. I'm using %th = link_to params.merge(sort_field: :dept, sort_order: sort_order) do� For a greater variety of icons (offered under a free MIT license), you might consider my personal favorite library: Font Awesome. Here is what the icons look like. Font Awesome works the same way as the Glyphicon with a few tweaks. Here is how to use it: Embed Font Awesome on your webpage using a CDN.

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

Rails form submit button partial, support for new/edit record detect , Rails form submit button partial, support for new/edit record detect and font awesome icons - gist:c66afcfd41507b072546. Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. But, they'll work in just about any project, too. That's because Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.

rails 4.1: styling an app with bootstrap and font-awesome – Notes , @import "bootstrap-sprockets"; @import "bootstrap"; @import "font-awesome";. Once you do this, you will need to also import the particular� Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation

How to place Font Awesome icon to input field ?, It is as simple as putting Font Awesome icon on any button. The <i> tag and < span> tag are used widely to add icons on the webpages. To add� A short post and video on how to add font awesome icons to your Ruby on Rails forms. Add a comment if you have any questions or video requests.

Creative Ways to Use Font Awesome, For the purposes of this tutorial you will also need to include Bootstrap CSS and In this example we use Bootstrap Button Groups and Font Awesome Icons to�

  • Thanks a lot for your prompt response. I couldn't make this work. Could you expand your answer a little bit? I would like to know how exactly I can add class option for button_to, and after this change, why the call above will work. Thanks again.
  • its better explained here api.rubyonrails.org/classes/ActionView/Helpers/…
  • I thought you were suggesting to override button_to method. I tried your example and it didn't work. The icon won't show up. I think it makes sense, because we need image tag, together with class, and they must be placed in line with the text "Log in".
  • To summarize, for any html element generated using rails helpers, you can assign a class name to it using ':class' symbol.
  • Hi ranendra, I think this situation is an exception, because it involves embedding html tags back to a String. I believe your solution won't work, unfortunately.