3

I'm learning how to build rails apps, so bear with me on this question.

I've loaded font-awesome using the 'font-awesome-sass' gem.

In my CSS file, I load font-awesome:

@import "font-awesome-sprockets";
@import "font-awesome";

This works great when I test my app locally. I'm using the fa-users icon. I call this in my html page using:

<%= link_to root_path, class:'navbar-brand' do %>
  <i class="fa fa-users"></i>
  Title
<% end %>

However, when I deploy my app to Heroku, the fa-user icon turns into a square.

How can I fix this?

5 Answers5

6

turns into a square

Means you don't have the supporting webfont compiled (explained in a second).

You need to make sure you've compiled your assets, to allow the CSS to both read and use the webfont that's loaded by font-awesome:

$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Assets"
$ git push heroku master

We have several apps running font-awesome in a Heroku production environment.

To do it, we used the font-awesome-rails gem (this includes nice helpers):

<%= link_to fa-icon("users", text: "Title"), root_path, class:'navbar-brand' %>

We use the following SASS file:

@import font-awesome

Doing this works for us -- make sure you precompile (mentioned above), and it should work for you.

Web Icons

There are several web icon "frameworks" (Ionic and Font-Awesome are the most popular). These basically work in the same way -- they have a custom font which they've compiled into a webfont.

This webfont is then made available in your app through a series of custom classes. These classes prepend a specific font "character" (icon) to the class with the :before pseudoclass.

Thus, when you call fa-users class, you're really getting this:

.fa-users:before {
  content: "\f0c0";
}

The bottom line is that you need to make sure both the webfont and the CSS stylesheets are precompiled properly before referencing either.

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • 1
    Thanks! This worked. Since I'm new to rails I don't have a strong understanding about the precompile process, but I'll keep what you've said in mind for future reference. –  Dec 22 '15 at 20:17
3

You can add this code to your ".scss" file and don't care any gem or configuration stuff. 

    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
Manuk Karapetyan
  • 534
  • 4
  • 19
  • Thanks for the suggestion, but this produces the same results as I am currently getting. –  Dec 22 '15 at 20:13
  • @Pete Sorry for later responce , but you may need to clear all precompiled files on heroku. And deploy with this fresh code. – Manuk Karapetyan Jan 02 '16 at 22:14
1

Have you configured all css files into assets properly ? I think the error may happens due to faulty configuration of style sheets (CSSS) in assets pipline, the following links will help you sometimes to solve the issue.

  1. Rails: Using Font Awesome

  2. Easy ways to get Font Awesome 4.5.0 onto your website

Community
  • 1
  • 1
Praveen George
  • 9,237
  • 4
  • 26
  • 53
1

I had the same symptom (squares instead of webfonts) but a different cause. Mine was due to a CORS issue with my CDN. To see if you have the same cause as mine, just open the web console and look for errors like Cross-Origin Request Blocked.

webdevguy
  • 975
  • 10
  • 17
0

Heroku can't find the font folders. Here are a couple of solutions that helped me tackle same problem :

  1. Make sure you precompile your assets locally via rake assets:precompile before deploying to Heroku. Also check config.assets.compile = true on config/environments/production.rb.

  2. If that doesn't work, you can always go for Bootstrap CDN solution to be included in <head> tag of your layout files. This provides the same solution without loading the files from your server.:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Utku Kaynar
  • 1
  • 2