Unable to overwrite bootstrap-sass's font with that of font-awesome

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.

Answer 2

For those of you guys using Bootstrap 3.2+ (I guess), here's the list of SASS variables you can modify:

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

In our case, we want to make sure to define $font-family-base before doing @import "bootstrap".

By setting $font-family-base before the line below is reached, Bootstrap uses our $font-family-base instead (otherwise, it defaults to $font-family-base-serif, also defined in the variables.scss above).

$font-family-base: $font-family-sans-serif !default;

This is how my application.css.sass looks like

/*
 *= require_tree .
 *= require_self
 */

@import "fonts"
@import "compass"
@import "bootstrap"

And I have the following in _fonts.css.sass (You don't have to have it in a separate file)

$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif