Rails - using font-awesome icons

Question

I have a rails 4 app and am trying to use the font awesome icons in it (for social media login links).

I have:

 /* application.css.css:
 *= require_framework_and_overrides.css.scss
 *= require_self
 *= require_tree .
 */

/* framework_and_overrides.css.css: */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

In my gemfile:

gem 'font-awesome-sass', '~> 4.4.0'

I am also using bootstrap sass.

In my view, I try:

<%= link_to content_tag(icon('facebook', class: 'facebookauth')) %>

It renders "<>>" with nothing in between.

I have also tried:

<%= link_to content_tag icon('facebook', class: 'facebookauth') %>

I get the same error.

When I try:

<%= link_to content_tag(fa_icon('facebook', class: 'facebookauth')) %>
<%= link_to content_tag fa_icon('facebook', class: 'facebookauth') %>

I get this error:

undefined method `fa_icon' for

Does anyone know how to use font-awesome in Rails?

A new attempt:

                        <%= link_to  icon('google', id: 'googleauth'), user_omniauth_authorize_path(:google_oauth2) %>

                        <%= link_to icon('linkedin', id: 'linkedinauth'), user_omniauth_authorize_path(:linkedin) %>

                        <%= link_to icon('twitter', id: 'twitterauth'), user_omniauth_authorize_path(:twitter) %>
                    <% end %>   

This works fine to make the links, but I'm trying to put styling on the icons.

I have defined a css div called :facebookauth.

When I change the above, to:

<%= link_to icon('facebook', id: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>

Or try:

<%= link_to icon('facebook', class: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>

The links disappear. I want to make the size bigger and use my color styles. How can I put CSS on these links?

Answer 1

The helper seems to just populate the content of the content_tag - you still need to provide an element.

From the docs :

content_tag(:li, fa_icon('facebook', class: 'facebookauth'))

If you wanted to use the icon on its own, you'd be able to call fa_icon individually:

fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>

--

how to use the gem as it is intended

All the "web font" gems basically do the following:

1. Create a "web font" of many icons
2. Create a CSS file with classes, each class using a :before tag with content: of the web font

Each time you call one of the elements of the font (with class ), you're really just prepending a :before with the appropriate font reference.

Therefore, in order to do this, you need a valid HTML element. The fa_icon helper seems to create a <i> tag -- <i class="fa fa-camera-retro"></i> . If you want to use it with content_tag , you need to therefore provide another element for Rails to wrap the content in.

--

Update

Make sure it works like this:

<%= link_to fa_icon("facebook", text: "Facebook", class: "facebookauth"), your_path %>

We recently used the gem in a project and here's the result:

Answer 2

Try this:

Pure HTML:

<a class="btn btn-lg btn-social btn-github" href="<%= content_tag_url %>">
    <i class="fa fa-facebook"></i> Facebook
</a>

Answer 3

添加include FontAwesome::Rails::IconHelper到app/helpers/application_helper.rb