CODEWITHSUNDEEP
ruby-on-railstwitter-bootstraptwitter-bootstrap-railsfont-awesome
caarlos0
caarlos0

Reputation: 20633

Rails: Font Awesome doesnt download

I just run bundle update in my project, and Font-Awesome doesn't work anymore.

I tried both font-awesome-sass-rails and twitter-bootstrap-rails (which includes font awesome too), and I had the same behavior in both of them: instead of the icons, a square is shown.

I check the compiled CSS, and tried to download the fonts:

@font-face {
  font-family: "FontAwesome";
  src: url(/assets/fontawesome-webfont.eot);
  src: url(/assets/fontawesome-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fontawesome-webfont.woff) format("woff"), url(/assets/fontawesome-webfont.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

So I tried to download myapp/assets/fontawesome-webfont.woff, and it worked. I just can't understand what's the problem here.

My application.css.scss:

*
 *= require_self
 *= require bootstrap-datepicker
 *= require_tree .
 */

@import "bootstrap";
body {
  padding-top: 60px;
}
@import "bootstrap-responsive";
@import "font-awesome";

@font-face {
  font-family: 'Pontano Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Pontano Sans'), local('PontanoSans-Regular'), url(/assets/pontanosans.woff) format('woff');
}

*{
  font-family: 'Pontano Sans', sans-serif !important;
}

.table tbody tr:hover {
  cursor: pointer;
}

// rest of file...

The pontano-sans, for example, work just as expected.

My Gemfile (just the assets group):

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'bootstrap-sass'
  gem 'font-awesome-sass-rails'
  gem 'libv8', :platforms => :ruby
  gem 'therubyracer', '>= 0.11.1', :require => 'v8', :platforms => :ruby
  gem 'uglifier', '>= 1.0.3'
  gem 'turbolinks'
  gem 'mousetrap-rails'
  gem 'jquery-turbolinks'
  gem 'spinjs-rails'
  gem 'ajaxspin'
  gem 'chosen-rails'
  gem 'jquery-rails'
  gem 'turbo-sprockets-rails3'
  gem 'bootstrap-datepicker-rails'
end

What am I doing wrong here?

Thanks in advance.

EDIT!

Looks like a bug: https://github.com/littlebtc/font-awesome-sass-rails/issues/22

Upvotes: 3

Views: 4356

Answers (3)

Dima Melnik
Dima Melnik

Reputation: 884

Bug and here are the reason of this. Try to use

@import "font-awesome.css";

instead of

@import "font-awesome";

Upvotes: 0

R Milushev
R Milushev

Reputation: 4315

I would suggest to change the approach : create a new directory under app/assets , named fonts. Then copy the glyphs images there and include it to the assets in application.rb file , like this :

config.assets.paths << Rails.root.join("app", "assets", "fonts")

After that , you should rename your font-awesome.css to font-awesome.css.scss.erb and change the @font-face declaration in it like this :

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path('fontawesome-webfont.eot')%>');
  src: url('<%= asset_path('fontawesome-webfont.eot?#iefix')%>') format('eot'), url('<%=    asset_path('fontawesome-webfont.woff')%>') format('woff'), url('<%= asset_path('fontawesome-webfont.ttf')%>') format('truetype'), url('<%= asset_path('fontawesome-webfont.svg#FontAwesome')%>') format('svg');
 font-weight: normal;
 font-style: normal;
 }

This solution includes removing the gem 'font-awesome-sass-rails' .

Upvotes: 5

caarlos0
caarlos0

Reputation: 20633

Well, this is a bug.

For now I'm using my own fork of the repository.

Upvotes: 0

Related Questions