2

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?

Mel
  • 2,481
  • 26
  • 113
  • 273
  • why do you have `gem 'font-awesome-sass', '~> 4.4.0'` in your application.scss? or is this just here? – MMachinegun Nov 12 '15 at 13:47
  • Hi, that's in my gem file – Mel Nov 13 '15 at 03:06
  • Hi. Old question but... `icon("edit fa-lg", class: 'zero')` gives me the following markup: ``. I guess there was something wrong with 'facebookauth' (id or class) in your css definition like "display: none". – Jake Jones May 27 '16 at 18:28

3 Answers3

5

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

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • 1
    Hi Rich, I'm afraid this is all far too advanced for me. I don't understand any of it. I do want the icon on its own, as a link. That's why I set it out in the way I attempted. No idea what any of this advice means - I'm sure it's sensible to others who might have more understanding of the concepts than I have myself. Thanks anyway but I have no idea where to start in trying to understand this. – Mel Nov 13 '15 at 03:08
  • 1
    @rich-peck 's answer is correct. to put it more explicitly, use the following code: `<%= link_to your_route_here do = content_tag(:i, fa_icon('facebook', class: 'facebookauth')) %>`. see this stackoverflow answer for more examples: https://stackoverflow.com/questions/31326684/multiple-font-awesome-icons-as-rails-link – ktravers Nov 13 '15 at 04:17
  • @user2860931 you should start by copying the top piece of code I wrote and putting it into your app. – Richard Peck Nov 13 '15 at 09:07
  • Thanks, I did try. It gives this error: undefined method `fa_icon' for #<#:0x007ff0b1f4c3e8> – Mel Nov 13 '15 at 09:24
  • This means you've likely not installed the gem - are you sure it's in your gemfile? – Richard Peck Nov 13 '15 at 09:27
  • Yes, i'm sure its included. I can use i class="fa fa-youtube fa-2x and it works, but im trying to understand how to use it in rails as shown in the gem docs – Mel Nov 13 '15 at 09:28
  • Try changing `font-awesome-sass` to `font-awesome-rails` in your `Gemfile` and rebundling ;) – Richard Peck Nov 13 '15 at 09:36
  • No thanks Rich, I'm trying to learn how to use the gem I have installed. – Mel Nov 14 '15 at 03:24
3

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>
Ele
  • 33,468
  • 7
  • 37
  • 75
  • Hi Eleazar, I'd like to try and learn how to use the gem as it is intended. This looks like it might be some sort of override. Not sure what all the styles and formatting are for. Thanks anyway but I think this probably isn't for me. – Mel Nov 12 '15 at 02:13
  • Alright, it was just a way to do it using HTML. Greetings! – Ele Nov 12 '15 at 02:17
0

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

John Pollard
  • 3,729
  • 3
  • 24
  • 50