Twitter Bootstrap Question posted in

Twitter bootstrap – Rails – using font-awesome icons

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?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Add
    include FontAwesome::Rails::IconHelper to app/helpers/application_helper.rb

    Login or Signup to reply.
  3. 0

    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:

    enter image description here

    enter image description here

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search