Question

I am using bootstrap-sass and the font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails) gems. I would like to override the bootstrap font setting from that of font-awesome.

From font-awesome’s site I can override the bootstrap defaults, if I just import if after bootstrap’s import.

@import 'bootstrap';
@import 'font-awesome';

I have done the above, but font-awesome’s font is not overriding. I have pushed my project on github – https://github.com/murtaza52/rails-base. The url is accessible on localhost:3000/posts

I will appreciate if someone can help me overriding bootstraps’s default font with those of font-awesome’s

Answer 1

Modify your application.css.scss to look like below

@import "font-awesome";
$baseFontFamily: 'FontAwesome';
@import "bootstrap";

...

@import "bootstrap-responsive";
//@import "scaffolds";
@import "posts";

WHY?

1. You move import "font-awesome" at the top and then define baseFontFamily because that’s what bootstrap uses to define font-family for all the elements. Check Typography and links block in the middle. If you import bootstrap after this, FontAwesome will be used by default.
2. You should remove import "scaffolds"; line because scaffolds.css.scss will reset your font family for body element which will be inherited by every other element.

If you can’t avoid importing it before bootstrap. I hope that helps.